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

/* CSS Variables for gradient colors */
:root {
  --accent-primary: #80cbc4;
  --accent-secondary: #a5d6a7;
}

/* Enable text selection - strengthened rules with higher specificity */
@layer base {
  html, body, div, span, p, h1, h2, h3, h4, h5, h6,
  ul, ol, li, article, aside, details, figcaption, figure,
  footer, header, main, nav, section, summary {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    -webkit-user-drag: auto !important;
  }

  *:not([data-no-select]) {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
  }

  /* Allow links and interactive elements to have pointer cursor */
  a, button, [role="button"], .cursor-pointer {
    cursor: pointer !important;
  }
}

/* Mobile Menu Styles */
@layer components {
  /* Mobile menu transitions */
  [data-mobile-menu-target="menu"] {
    transition: opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
  }

  [data-mobile-menu-target="menu"]:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
  }

  /* Mobile menu items */
  [data-mobile-menu-target="menu"] a {
    position: relative;
    display: block;
    width: 100%;
  }

  [data-mobile-menu-target="menu"] a:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 2px;
    background-color: #80cbc4;
    transition: width 0.3s ease;
  }

  [data-mobile-menu-target="menu"] a:hover:after {
    width: 100%;
  }

  /* Menu icon transitions */
  [data-mobile-menu-target="openIcon"],
  [data-mobile-menu-target="closeIcon"] {
    transition: opacity 0.2s ease;
  }
}

/* Custom Styles for Markdown Headings */
.markdown h1::before {
  content: "# ";
  color: #80cbc4;
}
.markdown h2::before {
  content: "## ";
  color: #80cbc4;
}
.markdown h3::before {
  content: "### ";
  color: #80cbc4;
}
.markdown h4::before {
  content: "#### ";
  color: #80cbc4;
}
.markdown h5::before {
  content: "##### ";
  color: #80cbc4;
}
.markdown h6::before {
  content: "###### ";
  color: #80cbc4;
}

/* Paragraphs and Text Styling */
.markdown p {
  margin-top: 1rem;
  margin-bottom: 1rem;
  line-height: 1.75;
  color: #3d4852;
}
.markdown a {
  color: #80cbc4;
  text-decoration: underline;
}
.markdown a:hover {
  color: #4db6ac;
}

/* Customize List Styling */
.markdown ul {
  list-style-type: disc;
  padding-left: 1.5rem;
}
.markdown ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
}
.markdown li {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

/* Blockquotes */
.markdown blockquote {
  border-left: 4px solid #e2e8f0;
  padding-left: 1rem;
  color: #606f7b;
  font-style: italic;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Code Blocks */
.markdown pre {
  background-color: #f1f5f8;
  color: #3d4852;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.markdown code {
  background-color: #eef2f7;
  color: #a5d6a7;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.875rem;
}

/* Tables */
.markdown table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.markdown th, .markdown td {
  padding: 0.75rem;
  border: 1px solid #e2e8f0;
  text-align: left;
}
.markdown th {
  background-color: #f1f5f8;
  color: #3d4852;
  font-weight: bold;
}
.markdown tr:nth-child(even) {
  background-color: #f8fafc;
}

/* Images */
.markdown img {
  max-width: 100%;
  border-radius: 0.375rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Horizontal Rules */
.markdown hr {
  border: 0;
  border-top: 1px solid #e2e8f0;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Inline Code */
.markdown p code {
  background-color: #eef2f7;
  color: #a5d6a7;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-family: "Courier New", Courier, monospace;
}

.markdown h1 {
  color: #3d4852;
  /* background-color:  #991b1b; */
  text-decoration: underline;
  text-decoration-color: #80cbc4;
}

@layer components {
  .terminal-bg {
    @apply bg-[#eef2f7] border border-slate-200 shadow-sm;
  }

  .terminal-header {
    @apply px-3 pt-2 flex items-center border-b border-slate-200;
  }

  .btn-primary {
    @apply bg-[#80cbc4] hover:bg-[#a5d6a7] text-gray-700 transition-colors;
  }

  .console-text {
    @apply text-green-400;
  }

  .card-hover {
    @apply transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 hover:scale-[1.02];
  }
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

.gradient-text {
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: text;
}