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

/* ============================================================
   Marketing design system
   Shared classes used across pages/* templates and shared/public
   ============================================================ */

@layer components {
  /* Section eyebrow label */
  .marketing-eyebrow {
    @apply inline-flex items-center gap-2 text-[11px] font-medium tracking-[0.14em] uppercase text-warm-500;
  }

  .marketing-eyebrow::before {
    content: '';
    @apply inline-block w-6 h-px bg-hairline;
  }

  /* Display headings (Host Grotesk) */
  .marketing-display-h1 {
    @apply font-display text-[44px] sm:text-[56px] lg:text-[68px] leading-[1.02] tracking-[-0.025em] text-ink font-medium;
  }

  .marketing-display-h2 {
    @apply font-display text-[36px] sm:text-[44px] lg:text-[52px] leading-[1.05] tracking-[-0.02em] text-ink font-medium;
  }

  .marketing-display-h3 {
    @apply font-display text-[24px] sm:text-[28px] lg:text-[32px] leading-[1.15] tracking-[-0.015em] text-ink font-medium;
  }

  .marketing-lead {
    @apply text-[17px] sm:text-[18px] leading-[1.6] text-warm-500;
  }

  /* Surfaces */
  .marketing-card {
    @apply bg-white rounded-2xl border border-hairline;
  }

  .marketing-card-hover {
    @apply transition-all duration-200 hover:border-warm-300/60 hover:shadow-float;
  }

  .marketing-band {
    @apply bg-band;
  }

  .marketing-surface {
    @apply bg-surface;
  }

  /* Buttons */
  .marketing-btn-primary {
    @apply inline-flex items-center justify-center gap-2 rounded-full bg-ink px-6 py-3 text-[14px] font-medium text-white hover:bg-ink/90 transition-colors;
  }

  .marketing-btn-secondary {
    @apply inline-flex items-center justify-center gap-2 rounded-full bg-white border border-hairline px-6 py-3 text-[14px] font-medium text-ink hover:bg-band transition-colors;
  }

  .marketing-btn-ghost {
    @apply inline-flex items-center gap-1.5 text-[14px] font-medium text-ink hover:text-warm-500 transition-colors;
  }

  /* Decorative backgrounds */
  .marketing-dot-pattern {
    background-image: radial-gradient(circle, #d4cab5 1px, transparent 1px);
    background-size: 22px 22px;
  }

  .marketing-grid-frame {
    background-image:
      linear-gradient(to right, rgba(232, 223, 206, 0.5) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(232, 223, 206, 0.5) 1px, transparent 1px);
    background-size: 48px 48px;
  }

  /* Hairline dividers */
  .marketing-hairline {
    @apply border-t border-hairline;
  }

  /* Section container */
  .marketing-container {
    @apply mx-auto max-w-7xl px-6 lg:px-8;
  }
}

/* Smooth scroll for in-page anchors */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

/* Selection */
::selection {
  background-color: #2C2A26;
  color: #FBF8F2;
}

/* TinyMCE fullscreen mode - ensure it's above dashboard header (z-10 = 10) */
.tox.tox-tinymce.tox-fullscreen,
.tox-fullscreen,
.tox.tox-fullscreen {
  z-index: 9999 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

/* TinyMCE fullscreen body class - hide scrollbar and ensure fullscreen takes over */
body.tox-fullscreen {
  overflow: hidden !important;
}

/* Hide dashboard header and sidebar when TinyMCE is in fullscreen mode */
body.tox-fullscreen .tox-fullscreen-hide {
  display: none !important;
}

/* Ensure TinyMCE editor header in fullscreen is above everything */
.tox-fullscreen .tox-editor-header,
.tox.tox-fullscreen .tox-editor-header {
  z-index: 10000 !important;
}

/* Ensure TinyMCE dialogs appear above everything */
.tox-tinymce-aux {
  z-index: 10001 !important;
}

/* TinyMCE fullscreen editor container */
.tox-fullscreen .tox-editor-container {
  z-index: 9999 !important;
}

@import 'actiontext.css';
/* Blog content styles */
.prose table {
  @apply border-collapse border border-gray-300;
}

.prose td, .prose th {
  @apply border border-gray-300 p-2;
}

.prose blockquote {
  @apply border-l-4 border-gray-300 pl-4 italic;
}

.prose pre {
  @apply p-4 rounded-lg overflow-x-auto;
}

.prose code {
  @apply bg-gray-100 rounded px-1;
}

.prose img {
  @apply mx-auto;
}

/* TinyMCE specific alignments */
.prose .mce-align-center {
  @apply text-center;
}

.prose .mce-align-right {
  @apply text-right;
}

.prose .mce-align-justify {
  @apply text-justify;
}

/* Additional spacing for lists */
.prose ul, .prose ol {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

/* Ensure images are responsive */
.prose img {
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

/* Style blockquotes */
.prose blockquote p:first-of-type::before,
.prose blockquote p:last-of-type::after {
  content: none;
}

/* Ensure tables are responsive */
.prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
} 
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 *


 */