@tailwind base;
@tailwind components;
@tailwind utilities;

/* Global link color: secondary */
a {
  @apply text-secondary-600 hover:text-secondary-700;
}

/* Override for header navigation - gold text from Parker Agency main site */
header nav a:not(.btn) {
  color: #f2d66d !important;
  font-size: 16px !important;
  font-weight: normal !important;
  letter-spacing: 0.05em !important;
}

header nav a:not(.btn):hover {
  color: #ffffff !important;
}

@import "title-character-checker.css";
@import "tools-cross-sell.css";
@import "amazon-tools/amazon-ppc-xray.css";
@import "amazon-tools/excel-merge.css";
@import "amazon-tools/amazon-xray-form.css";
@import "accordion-pills.css";

@media (max-width: 768px) {
  section.relative.overflow-hidden .btn-primary.text-center {
    font-size: 1.25rem !important;
  }
}

@layer base {
  html {
    @apply scroll-smooth;
    font-size: 16px; /* 1rem = 16px base */
  }

  body {
    @apply font-sans text-gray-700 antialiased;
    font-size: 1rem; /* Body text max 1rem (16px) */
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-heading font-bold text-gray-900;
  }

  @media (max-width: 768px) {
    html {
      font-size: 14px; /* Slightly smaller on mobile */
    }
  }
}

@layer utilities {
  /* !important: Theme consistency - enforce design token border-radius across all rounded variants
     This overrides Tailwind defaults to maintain visual consistency per design system */
  .rounded,
  .rounded-md,
  .rounded-lg {
    border-radius: 0.25rem !important;
  }

  /* !important: Fixed dimensions - prevent layout shift on icon containers
     Pixel units with !important ensure consistent sizing regardless of parent context */
  .w-10.h-10.flex-shrink-0 {
    width: 40px !important;
    height: 40px !important;
  }
  .w-12.h-12 {
    flex-shrink: 0 !important;
    width: 48px !important;
    height: 48px !important;
  }
  .w-10.h-10.flex-shrink-0 > svg,
  .w-12.h-12 > svg {
    width: 24px !important;
    height: 24px !important;
  }

  /* !important: Fixed dimensions - badge icons must maintain size for visual alignment */
  .badge-icon {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
  }

  /* !important: Mobile spacing override - reduce excessive vertical spacing on mobile
     Overrides Tailwind's space-y-32 utility for better mobile UX */
  @media (max-width: 768px) {
    .space-y-32 > * + * {
      margin-top: 2rem !important;
    }
  }
}

/* Override theme's main element spacing for blog posts */
main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@layer components {
  .cta-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .cta-gradient {
    background: linear-gradient(calc(var(--gradient-angle) * 1deg), var(--gradient-from), var(--gradient-to));
  }

  /* Override theme’s btn rounding for all btn classes */
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .card {
    border-radius: 0.25rem !important;
  }

  .btn {
    @apply inline-flex items-center justify-center px-6 py-3 font-medium transition duration-200 ease-in-out;
  }

  .btn-primary {
    @apply btn bg-primary-600 text-white hover:bg-primary-700 hover:text-white hover:scale-105;
  }

  .btn-secondary {
    @apply btn bg-secondary-600 text-white hover:bg-secondary-700 hover:scale-105;
  }

  /* Ensure all button text is white in all states */
  .btn-secondary,
  .btn-secondary:hover,
  .btn-secondary:active,
  .btn-secondary:focus {
    @apply text-white;
  }

  /* Ensure primary buttons keep white text on hover */
  .btn-primary,
  .btn-primary:hover,
  .btn-primary:active,
  .btn-primary:focus,
  .bg-primary-600:hover,
  .bg-primary-700:hover {
    @apply text-white;
  }

  .btn-outline {
    @apply btn border-2 border-primary-600 text-primary-600 hover:scale-105;
  }

  .section {
    @apply py-16 md:py-24;
  }

  .card {
    @apply bg-white p-6 transition duration-200 hover:shadow-md;
  }

  .nav-link {
    @apply text-gray-600 hover:text-primary-600 font-bold transition duration-200;
  }

  .feature-grid {
    @apply grid gap-8 md:grid-cols-2 lg:grid-cols-3;
  }

  /* subtle hr between items in .space-y-32 on mobile */
  @media (max-width: 768px) {
    .space-y-32 > * + *::before {
      content: "";
      display: block;
      width: 100%;
      border-top: 1px solid rgba(74,120,152,0.5);
      margin: 0 rem 0;
    }
  }

  /* Blog and Syntax Highlighting Styles */
  .highlight {
    @apply text-sm font-mono text-gray-200;
  }

  .highlight table {
    @apply w-full border-separate border-spacing-0;
  }

  .highlight table td {
    @apply p-0;
  }

  .highlight table td:first-child {
    @apply pr-4 text-right select-none text-gray-500 border-r border-gray-700;
  }

  .highlight table td:last-child {
    @apply pl-4 w-full;
  }

  .highlight .k, .highlight .kd {
    @apply text-purple-400 font-semibold;
  }

  .highlight .nf, .highlight .nx {
    @apply text-blue-400;
  }

  .highlight .s, .highlight .s1, .highlight .s2 {
    @apply text-green-400;
  }

  .highlight .mi, .highlight .mf {
    @apply text-orange-400;
  }

  .highlight .c, .highlight .c1, .highlight .cm {
    @apply text-gray-500 italic;
  }

  .highlight .o {
    @apply text-yellow-400;
  }

  .highlight .p {
    @apply text-gray-400;
  }

  .prose {
    @apply max-w-none;
  }

  .prose h1, .prose h2, .prose h3, .prose h4 {
    @apply font-heading font-bold text-gray-900;
  }

  .prose h1 {
    @apply text-4xl;
    font-size: 2.25rem !important;
    margin-bottom: 2rem !important;
  }

  .prose h2 {
    @apply text-3xl;
    font-size: 1.875rem !important;
    margin-top: 3rem !important;
    margin-bottom: 1.5rem !important;
  }

  .prose h3 {
    @apply text-2xl;
    font-size: 1.5rem !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
  }

    .prose p {
    @apply text-gray-700 leading-relaxed;
    font-size: 1rem; /* Max 1rem for body text */
    margin-bottom: 1.5rem !important;
  }

  .prose a {
    @apply text-secondary-600 hover:text-secondary-700 no-underline;
    color: #4a7898 !important; /* secondary-600 - override theme's a { color: inherit; } */
  }

  .prose a:hover {
    color: #3d6379 !important; /* secondary-700 */
  }

  .prose ul, .prose ol {
    @apply my-6 ml-6;
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    margin-left: 1.5rem !important;
    list-style-type: disc !important; /* Add bullets back */
  }

  .prose ol {
    list-style-type: decimal !important;
  }

    .prose li {
    font-size: 1rem; /* Match paragraph text size */
    margin-bottom: 0.5rem !important;
  }

  .prose blockquote {
    @apply border-l-4 border-gray-200 pl-4 italic text-gray-700;
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
  }

  .prose img {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
  }

  .prose code:not(pre code) {
    @apply bg-gray-100 text-gray-900 px-1.5 py-0.5 rounded text-sm font-mono;
  }

  .prose pre {
    background-color: #1f2937 !important; /* Dark gray background */
    border-radius: 0.375rem !important; /* 6px rounded corners */
    padding: 1rem 1.5rem !important; /* 16px 24px */
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    overflow-x: auto !important;
  }

  .prose pre code {
    background-color: transparent !important;
    padding: 0 !important;
    color: #e5e7eb !important; /* Light gray text */
    font-size: 1rem !important;
    line-height: 1.75 !important;
  }

  /* Table styling */
  .prose table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
  }

  .prose thead {
    border-bottom: 2px solid #e5e7eb !important;
  }

  .prose th {
    padding: 0.25rem 0.75rem 0.75rem 0 !important;
    text-align: left !important;
    font-weight: 600 !important;
    vertical-align: baseline !important;
  }

  .prose td {
    padding: 0.75rem 0.75rem 0.75rem 0 !important;
    vertical-align: baseline !important;
  }

  .prose tbody tr {
    border-bottom: 1px solid #e5e7eb !important;
  }

  .prose tbody tr:last-child {
    border-bottom: none !important;
  }

  /* TOC items display is now controlled by JavaScript */

  /* TOC overrides: match Hugo-generated selectors */
  nav.TableOfContents,
  nav#TableOfContents {
    margin-top: 0.75rem !important;
  }
  nav.TableOfContents > ul,
  nav#TableOfContents > ul {
    margin-top: 0.5rem !important;
  }

  /* Override theme's nav ul { display: flex; } for TOC */
  .toc-container nav#TableOfContents > ul {
    display: block !important;
    flex-direction: column !important;
  }

  /* Override for nested TOC lists as well */
  .toc-container nav#TableOfContents ul ul {
    display: block !important;
    flex-direction: column !important;
  }

  /* TOC heading override inside sidebar */
  .toc-container > h2 {
    margin-top: 1rem !important;
  }

  /* Capitalize and recolor TOC links */
  .toc-container nav#TableOfContents a {
    @apply text-secondary-600 hover:text-secondary-700;
    text-transform: capitalize !important;
  }

  /* Reset list margins inside TOC */
  .toc-container nav#TableOfContents ul,
  .toc-container nav#TableOfContents ol {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Unbold TOC content except heading */
  .toc-container nav#TableOfContents,
  .toc-container nav#TableOfContents a,
  .toc-container nav#TableOfContents li,
  .toc-container nav#TableOfContents strong {
    font-weight: normal !important;
  }

  /* TOC container enhancements */
.toc-container ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.toc-container li {
  margin-bottom: 0.25rem;
}

.toc-container a {
  display: block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
  color: #374151; /* Tailwind gray-700 */
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  font-weight: 500;
  font-size: 1rem; /* TOC text max 1rem */
  line-height: 1.6;
}

.toc-container a:hover,
.toc-container a:focus {
  background: #f1f5f9; /* Tailwind slate-100 */
  color: #1d4ed8; /* Tailwind blue-700 */
}

  /* Offset in-page anchors for fixed header */
  h2[id], h3[id], h4[id], h5[id], h6[id] {
    scroll-margin-top: 5rem;  /* adjust to header height */
  }

  @media (min-width: 1024px) {
    h2[id], h3[id], h4[id], h5[id], h6[id] {
      scroll-margin-top: 5.5rem;  /* adjust to header height on large screens */
    }
  }

  /* ============================================
     Formula Card Styles
     Usage: {{< formula >}}...{{< /formula >}}
     ============================================ */
  .formula-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-left: 4px solid #d9a54a; /* primary color */
    border-radius: 0.5rem;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    font-family: 'Fira Code', 'Consolas', monospace;
  }

  .formula-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
  }

  .formula-content {
    font-size: 1.125rem;
    font-weight: 500;
    color: #1e293b;
    line-height: 1.6;
  }

  .formula-content strong {
    color: #0f172a;
  }

  /* ============================================
     Notice/Alert Box Styles
     Usage: {{< notice type >}}...{{< /notice >}}
     Types: danger, warning, success, info
     ============================================ */
  .notice {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem !important;
    margin: 1.5rem 0;
    border-radius: 0.5rem;
    border: 1px solid;
  }

  .notice-icon {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
  }

  .notice-body {
    flex: 1;
    min-width: 0;
  }

  .notice-title {
    font-weight: 700;
    margin-bottom: 0.375rem;
    line-height: 1.4;
    display: block;
  }

  /* Citation-friendly blockquote within notice (for GEO) */
  blockquote.notice-cite {
    margin: 0;
    padding: 0;
    border: none;
    font-style: normal;
  }

  .notice-content {
    line-height: 1.6;
    font-size: 1rem;
  }

  .notice-content p,
  .notice-content li {
    font-size: 1rem;
  }

  .notice-content p:last-child {
    margin-bottom: 0;
  }

  /* Danger (Red) - for critical warnings, bleeders, risks */
  .notice-danger {
    background-color: #fef2f2;
    border-color: #fecaca;
  }
  .notice-danger .notice-icon {
    background-color: #dc2626;
    color: white;
  }
  .notice-danger .notice-title {
    color: #991b1b;
  }
  .notice-danger .notice-content {
    color: #7f1d1d;
  }

  /* Warning (Yellow/Amber) - for caution areas, traps */
  .notice-warning {
    background-color: #fffbeb;
    border-color: #fde68a;
  }
  .notice-warning .notice-icon {
    background-color: #d97706;
    color: white;
  }
  .notice-warning .notice-title {
    color: #92400e;
  }
  .notice-warning .notice-content {
    color: #78350f;
  }

  /* Success (Green) - for winning strategies, best practices */
  .notice-success {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
  }
  .notice-success .notice-icon {
    background-color: #16a34a;
    color: white;
  }
  .notice-success .notice-title {
    color: #166534;
  }
  .notice-success .notice-content {
    color: #14532d;
  }

  /* Info (Blue) - for neutral tips, definitions */
  .notice-info {
    background-color: #eff6ff;
    border-color: #bfdbfe;
  }
  .notice-info .notice-icon {
    background-color: #2563eb;
    color: white;
  }
  .notice-info .notice-title {
    color: #1e40af;
  }
  .notice-info .notice-content {
    color: #1e3a8a;
  }

  /* Mobile responsive adjustments */
  @media (max-width: 480px) {
    .formula-card {
      padding: 1rem;
    }
    .formula-content {
      font-size: 1rem;
    }
    .notice {
      flex-direction: column;
      gap: 0.75rem;
    }
    .notice-icon {
      width: 1.5rem;
      height: 1.5rem;
      font-size: 0.75rem;
    }
  }
}