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

@layer base {
  :root {
    --background: 0 0% 100%;
    --card: 0 0% 100%;
    --popover: 0 0% 100%;
    --destructive-foreground: 0 0% 100%;
    --primary-foreground: 0 0% 100%;

    --secondary: 0 0% 90%;
    --muted: 0 0% 90%;
    --accent: 0 0% 90%;

    --primary: 0 1% 22%;
    --foreground: 0 1% 22%;
    --card-foreground: 0 1% 22%;
    --popover-foreground: 0 1% 22%;
    --secondary-foreground: 0 1% 22%;
    --accent-foreground: 0 1% 22%;

    --border: 0 0% 90%;
    --input: 0 0% 90%;
    --ring: 0 0% 50%;
    --muted-foreground: 0 0% 43%;

    --destructive: 0 62% 53%;
    --radius: 0.5rem;
    --warning: 38 92% 50%;
    --warning-foreground: 48 96% 89%;
    --success: 158 48% 45%;
  }

  /* Page builders and themes style bare buttons with class-scoped rules that
     outrank a plain `button` reset: Hello Elementor's [type=button] reset
     crushes icon buttons, and Elementor's global kit
     (.elementor-kit-N button { background: var(--e-global-color-primary);
     padding: 15px 30px }) repaints our radios and link buttons, hiding their
     text. Re-assert the preflight button reset with a real `.eventkoi-front`
     class so it beats those (0,1,1) rules, while our own !important utilities
     (bg-*, h-*, px-*) still override it on real buttons. WordPress block
     buttons are skipped so they keep the theme's block styling. */
  .eventkoi-front
    :is(button, [type='button'], [type='reset'], [type='submit']):not(
      .wp-block-button__link
    ):not(.wp-element-button) {
    margin: 0;
    padding: 0;
    border: 0 solid;
    background-color: transparent;
    background-image: none;
    color: inherit;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: none;
  }
}

@layer utilities {
  .fc .fc-event:focus-visible {
    outline: 2px solid hsl(var(--primary)) !important;
    outline-offset: 1px !important;
    box-shadow: none !important;
  }

  .fc .fc-daygrid-day-number:focus-visible,
  .fc .fc-col-header-cell-cushion:focus-visible,
  .fc .fc-daygrid-more-link:focus-visible {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 1px;
    border-radius: 3px;
  }

  .fc .fc-button:focus-visible {
    outline: 2px solid hsl(var(--primary)) !important;
    outline-offset: 2px;
    box-shadow: none !important;
  }
}

/* Page builders load their own utility CSS after ours (Beaver Builder's theme
   ships Bootstrap with `.hidden { display: none !important }`), which outranks
   the responsive display utilities by source order and hides list-view dates.
   Re-declare the display utilities the frontend uses under the .eventkoi-front
   scope so they win on specificity regardless of stylesheet order. */
.eventkoi-front .hidden {
  display: none !important;
}

@media (min-width: 640px) {
  .eventkoi-front .sm\:flex {
    display: flex !important;
  }
  .eventkoi-front .sm\:grid {
    display: grid !important;
  }
}

@media (min-width: 768px) {
  .eventkoi-front .md\:block {
    display: block !important;
  }
  .eventkoi-front .md\:flex {
    display: flex !important;
  }
  .eventkoi-front .md\:grid {
    display: grid !important;
  }
  .eventkoi-front .md\:hidden {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .eventkoi-front .lg\:flex {
    display: flex !important;
  }
}

/* Beaver Builder paints every element inside a button with its global button
   text color, which turns icon strokes white on our white toolbar buttons.
   Icons draw with currentColor, so pin them to the button's own text color. */
.eventkoi-front button svg.lucide,
.eventkoi-front button svg.lucide * {
  color: inherit !important;
  stroke: currentColor !important;
}

/* List row date/time. Own class names, so page-builder utility CSS
   (Bootstrap's .hidden and friends) can never toggle these off. */
.eventkoi-front .ek-date-sm {
  display: flex;
}

.eventkoi-front .ek-date-md {
  display: none;
}

@media (min-width: 768px) {
  .eventkoi-front .ek-date-sm {
    display: none;
  }

  .eventkoi-front .ek-date-md {
    display: block;
  }
}
