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

@layer components {
  .btn {
    @apply px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors;
  }
  
  .btn-secondary {
    @apply px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors;
  }
  
  .btn-outline {
    @apply px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors;
  }
}

/* Typography */
.prose {
  color: #374151;
  max-width: 65ch;
}

/* Select placeholder style */
select.placeholder-selected {
  color: #9ca3af;
}

select option[value=""] {
  color: #9ca3af;
}

select option:not([value=""]) {
  color: #374151;
}

/* Allow prose to be full width when explicitly set */
.prose.max-w-none {
  max-width: none;
}

.prose h1 {
  font-size: 2.25rem;
  font-weight: 800;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}

.prose h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}

.prose h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

.prose h4 {
  font-size: 0.875rem;
  color: var(--color-gray-400);
}

.prose p {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  line-height: 1.75;
}

.prose ul {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  list-style-type: disc;
  padding-left: 1.625em;
}

.prose ol {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  list-style-type: decimal;
  padding-left: 1.625em;
}

.prose li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose a {
  color: #dc2626;
  text-decoration: underline;
  font-weight: 500;
}

.prose a:hover {
  color: #991b1b;
}

.prose strong {
  font-weight: 600;
}

.prose blockquote {
  font-style: italic;
  border-left-width: 0.25rem;
  border-left-color: #e5e7eb;
  padding-left: 1em;
  margin-left: 0;
  margin-right: 0;
  margin-top: 1.6em;
  margin-bottom: 1.6em;
}

.prose code {
  font-family: 'Martian Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 0.775em;
  background-color: #f3f4f6;
  padding: 0.125em 0.25em;
  border-radius: 0.25rem;
}

/* Override Tailwind Typography's default backtick decorations for inline code */
.prose code:before,
.prose code:after,
.prose-sm code:before,
.prose-sm code:after,
.prose-lg code:before,
.prose-lg code:after,
.md\:prose-lg code:before,
.md\:prose-lg code:after {
  content: none !important;
}

.prose pre {
  background-color: #f6f8fa;
  color: #24292e;
  padding: 1em;
  border-radius: 0.375rem;
  overflow-x: auto;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  border: 1px solid #e1e4e8;
}

.prose pre code {
  background-color: transparent;
  padding: 0;
  font-size: 0.875em;
  color: #24292e;
  font-family: 'Martian Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  font-weight: 400;
}

/* Remove top margin from first element in preview containers */
.prose > :first-child {
  margin-top: 0;
}

/* Remove bottom margin from last element in preview containers */
.prose > :last-child {
  margin-bottom: 0;
}

/* Rouge Syntax Highlighting - GitHub Light Theme */
.highlight .c { color: #6a737d; font-style: italic } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { color: #d73a49; font-weight: 600 } /* Keyword */
.highlight .o { color: #d73a49 } /* Operator */
.highlight .cm { color: #6a737d; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #6a737d; font-weight: 600 } /* Comment.Preproc */
.highlight .c1 { color: #6a737d; font-style: italic } /* Comment.Single */
.highlight .cs { color: #6a737d; font-weight: 600; font-style: italic } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #999999 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: 600 } /* Generic.Strong */
.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { color: #d73a49; font-weight: 600 } /* Keyword.Constant */
.highlight .kd { color: #d73a49; font-weight: 600 } /* Keyword.Declaration */
.highlight .kn { color: #d73a49; font-weight: 600 } /* Keyword.Namespace */
.highlight .kp { color: #d73a49; font-weight: 600 } /* Keyword.Pseudo */
.highlight .kr { color: #d73a49; font-weight: 600 } /* Keyword.Reserved */
.highlight .kt { color: #d73a49; font-weight: 600 } /* Keyword.Type */
.highlight .m { color: #005cc5 } /* Literal.Number */
.highlight .s { color: #032f62 } /* Literal.String */
.highlight .na { color: #6f42c1 } /* Name.Attribute */
.highlight .nb { color: #005cc5 } /* Name.Builtin */
.highlight .nc { color: #6f42c1; font-weight: 600 } /* Name.Class */
.highlight .no { color: #005cc5 } /* Name.Constant */
.highlight .ni { color: #6f42c1 } /* Name.Entity */
.highlight .ne { color: #6f42c1; font-weight: 600 } /* Name.Exception */
.highlight .nf { color: #6f42c1; font-weight: 600 } /* Name.Function */
.highlight .nn { color: #6f42c1 } /* Name.Namespace */
.highlight .nt { color: #22863a } /* Name.Tag */
.highlight .nv { color: #e36209 } /* Name.Variable */
.highlight .ow { color: #d73a49; font-weight: 600 } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mf { color: #005cc5 } /* Literal.Number.Float */
.highlight .mh { color: #005cc5 } /* Literal.Number.Hex */
.highlight .mi { color: #005cc5 } /* Literal.Number.Integer */
.highlight .mo { color: #005cc5 } /* Literal.Number.Oct */
.highlight .sb { color: #032f62 } /* Literal.String.Backtick */
.highlight .sc { color: #032f62 } /* Literal.String.Char */
.highlight .sd { color: #032f62 } /* Literal.String.Doc */
.highlight .s2 { color: #032f62 } /* Literal.String.Double */
.highlight .se { color: #032f62 } /* Literal.String.Escape */
.highlight .sh { color: #032f62 } /* Literal.String.Heredoc */
.highlight .si { color: #032f62 } /* Literal.String.Interpol */
.highlight .sx { color: #032f62 } /* Literal.String.Other */
.highlight .sr { color: #032f62 } /* Literal.String.Regex */
.highlight .s1 { color: #032f62 } /* Literal.String.Single */
.highlight .ss { color: #005cc5 } /* Literal.String.Symbol */
.highlight .bp { color: #005cc5 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #e36209 } /* Name.Variable.Class */
.highlight .vg { color: #e36209 } /* Name.Variable.Global */
.highlight .vi { color: #e36209 } /* Name.Variable.Instance */
.highlight .il { color: #005cc5 } /* Literal.Number.Integer.Long */

/* Form styles */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent;
}

/* Animation utilities */
@keyframes slide-in {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-in {
  animation: slide-in 0.3s ease-out;
}

/* Custom checkbox styles */
input[type="checkbox"] {
  @apply w-4 h-4 text-red-600 bg-gray-100 border-gray-300 rounded focus:ring-red-500 focus:ring-2;
}

/* Success story logo styles for tiles and show page */
.success-story-tile-logo svg,
.success-story-show-logo svg {
  max-width: 100%;
  height: 100%;
  width: auto;
}

/* Logo carousel styles */
.logo-carousel-track {
  display: flex;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0); /* Force GPU acceleration */
}

/* Logo item styles */
.logo-item {
  cursor: pointer;
}

.logo-wrapper svg {
  height: 2.25rem; /* 36px - mobile size */
  width: auto;
  max-width: 112px;
  filter: grayscale(100%) opacity(0.4);
  transition: filter 0.3s ease;
}

/* Tablet and desktop logo sizes */
@media (min-width: 768px) {
  .logo-wrapper svg {
    height: 6rem; /* 96px - matches h-24 */
    max-width: 300px;
  }
}

.logo-item:hover .logo-wrapper svg,
.logo-item.logo-highlighted .logo-wrapper svg {
  filter: grayscale(0%) opacity(1);
}

/* Logo carousel fade effects */
.logo-carousel-container {
  position: relative;
}

.logo-carousel-fade-left,
.logo-carousel-fade-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 150px;
  pointer-events: none;
  z-index: 10;
}

.logo-carousel-fade-left {
  left: 0;
  background: linear-gradient(to right, rgb(249 250 251), transparent);
}

.logo-carousel-fade-right {
  right: 0;
  background: linear-gradient(to left, rgb(249 250 251), transparent);
}

/* Logo tooltip styles */
.logo-tooltip {
  white-space: normal;
  max-width: 288px; /* w-72 on mobile */
  position: fixed !important;
  z-index: 9999 !important;
  cursor: pointer;
}

@media (min-width: 768px) {
  .logo-tooltip {
    max-width: 320px; /* w-80 on desktop */
  }
}

/* Tooltip content scrolling */
.logo-tooltip .text-sm {
  max-height: 300px;
  overflow-y: auto;
}

/* Line clamp for tooltip summary (optional, keeping for other uses) */
.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Custom scrollbar for tooltip content */
.logo-tooltip .text-sm::-webkit-scrollbar {
  width: 6px;
}

.logo-tooltip .text-sm::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 3px;
}

.logo-tooltip .text-sm::-webkit-scrollbar-thumb {
  background: #9ca3af;
  border-radius: 3px;
}

.logo-tooltip .text-sm::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

/* Ensure tooltip appears above fade layers */
.logo-item {
  position: relative;
  z-index: 1;
}

.logo-item:hover {
  z-index: 15;
}



/* Unpublished/Draft Posts Styling */
.unpublished-post {
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
}

.unpublished-post:hover {
  background-color: #f3f4f6;
}

/* Grayscale filter for draft post images */
.grayscale {
  filter: grayscale(100%);
  opacity: 0.7;
}

/* Publish/Draft Toggle Switch */
.translate-x-0 {
  transform: translateX(0);
}

.translate-x-4 {
  transform: translateX(0.2rem);
}

.translate-x-5 {
  transform: translateX(1.25rem);
}

.translate-x-7 {
  transform: translateX(1.75rem);
}