@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-white: #FFFFFF;
  --color-black: #000;
  --color-dark: #263238;
  --color-primary: #F8BF2A;
  --color-yellow: #FBB040;
  --color-body: #263238;
  --color-gray: #B6B6B6;
  --color-light: #D9D9D9;

  --shadow-signUp: 0px 5px 10px rgba(4, 10, 34, 0.2);
  --shadow-one: 0px 2px 3px rgba(7, 7, 77, 0.05);
  --shadow-sticky: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);

  --font-sans: var(--font-plus-jakarta), ui-sans-serif, system-ui, sans-serif;
}

@layer base {
  :root {
    /*
      This block is for YOU to USE variables at runtime.
      The .dark rule and body rule need these to exist here.
    */
    --color-white: #FFFFFF;
    --color-black: #000;
    --color-dark: #263238;
    --color-primary: #F8BF2A;
    --color-yellow: #FBB040;
    --color-body: #263238;
    --color-gray: #B6B6B6;
    --color-light: #D9D9D9;

    --shadow-signUp: 0px 5px 10px rgba(4, 10, 34, 0.2);
    --shadow-one: 0px 2px 3px rgba(7, 7, 77, 0.05);
    --shadow-sticky: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);

    /* Default theme variables for easier light/dark mode switching */
    --background: var(--color-white);
    --foreground: var(--color-black);
    --foreground-muted: var(--color-body);
  }

  .dark {
    --background: var(--color-black);
    --foreground: var(--color-white);
    --foreground-muted: var(--color-body);
  }

  /*
   Apply the base background, text color, and font family to the body.
  */
  body {
    font-family: var(--font-plus-jakarta), sans-serif;
    background-color: var(--background);
    color: var(--foreground);
    @apply text-sm;
  }

  .container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@layer components {
  /* Your custom component styles remain here */
  input[type="checkbox"]:checked ~ label span svg {
    @apply inline-flex;
  }

  .sticky .header-logo {
    @apply py-5 lg:py-2;
  }

  .sticky .menu-scroll.active {
    @apply opacity-70;
  }

  input#togglePlan:checked ~ .dot {
    @apply translate-x-full;
  }

  input#checkboxLabel:checked ~ .box span {
    @apply opacity-100;
  }

   /* New Container Classes */
  .container-xl {
    @apply mx-auto max-w-screen-xl px-8;
  }

  .container-lg {
    @apply mx-auto max-w-screen-lg px-8;
  }

  .bg-radial-kombiniran {
    background-image: 
      /* Gradient 2 (iz centra, 20% prosojnost) - ta bo na vrhu */
      radial-gradient(circle 300px at 100px -50px, rgba(246, 186, 25, 0.46) 0%, rgba(255, 255, 255, 0) 100%),
      /* Gradient 1 (iz spodnjega levega kota, 49% prosojnost) - ta bo spodaj */
      radial-gradient(circle 150px at bottom left, rgba(246, 186, 25, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
    }
    .bg-radial-kombiniran2 {
    background-image: 
      /* Gradient 2 (iz centra, 20% prosojnost) - ta bo na vrhu */
      radial-gradient(circle 900px at 50% -400px, rgba(246, 186, 25, 0.4) 0%, rgba(255, 255, 255, 0) 100%),
      /* Gradient 1 (iz spodnjega levega kota, 49% prosojnost) - ta bo spodaj */
      radial-gradient(circle 600px at 25% 110%, rgba(246, 186, 25, 0.6) 0%, rgba(255, 255, 255, 0) 70%);
    }

     .payload-richtext {
    /*@apply text-base leading-relaxed break-words;*/
    color: var(--foreground); /* Uses your dark/light mode variable */
  }

 /* Headings */
  .payload-richtext h1, 
  .payload-richtext h2, 
  .payload-richtext h3, 
  .payload-richtext h4, 
  .payload-richtext h5, 
  .payload-richtext h6 {
    @apply font-bold mt-8 mb-4;
    color: var(--foreground); /* Ensures headers contrast with body text */
  }

  .payload-richtext h1 { @apply text-4xl lg:text-5xl; }
  .payload-richtext h2 { @apply text-3xl lg:text-4xl; }
  .payload-richtext h3 { @apply text-2xl lg:text-3xl; }
  .payload-richtext h4 { @apply text-xl lg:text-2xl; }

  /* Text Elements */
  .payload-richtext p {
    @apply mb-6;
  }

  .payload-richtext strong, 
  .payload-richtext b {
    @apply font-bold;
    color: var(--foreground);
  }

  /* Links */
  .payload-richtext a {
    @apply underline underline-offset-4 font-medium transition-colors duration-200;
    color: var(--color-primary); /* Using your yellow/gold color */
  }
  .payload-richtext a:hover {
    @apply opacity-80;
  }

  /* Lists (Crucial because Tailwind removes bullets by default) */
  .payload-richtext ul {
    @apply list-disc list-outside ml-6 mb-6;
  }
  .payload-richtext ol {
    @apply list-decimal list-outside ml-6 mb-6;
  }
  .payload-richtext li {
    @apply mb-2 pl-2;
  }
  .payload-richtext li > ul,
  .payload-richtext li > ol {
    @apply mb-0 mt-2;
  }

  /* Blockquotes */
  .payload-richtext blockquote {
    @apply border-l-4 pl-6 italic my-8 text-lg;
    border-color: var(--color-primary);
    color: var(--foreground);
  }

  /* Code Blocks */
  .payload-richtext pre {
    @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto mb-6 text-sm;
  }

   .payload-richtext sub {
 display: inline-block !important; 
  
  /* 2. Now 0px will actually work */
  line-height: 1.3em !important;
  
  /* 3. Standard resets to keep it aligned */
  vertical-align: baseline !important;
  position: relative !important;
  bottom: 0em !important; 
  font-size: 0.8em !important;
}
.payload-richtext p {
  margin-bottom: 0.7em;
}

  .payload-richtext code {
    @apply bg-gray-200 dark:bg-gray-800 px-1.5 py-0.5 rounded text-sm font-mono text-pink-600;
  }
  
  /* Tables (if you use the Payload table plugin) */
  .payload-richtext table {
    @apply w-full text-left border-collapse mb-6;
  }
  .payload-richtext th {
    @apply border-b-2 p-3 font-bold;
    border-color: var(--color-light);
    color: var(--foreground);
  }
  .payload-richtext td {
    @apply border-b p-3;
    border-color: var(--color-light);
  }

  .price .payload-richtext {
    font-size: 1em;
  }

  .price .payload-richtext h3, .price .payload-richtext p, .price .payload-richtext h2, .price .payload-richtext h5  {
    margin: 0;
  }
}

@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}