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

@font-face {
  font-family: "Delicious Handrawn";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("/assets/DeliciousHandrawn-Regular-2913badc.woff2") format('woff2'),
      url("/assets/DeliciousHandrawn-Regular-6c493fcd.woff") format('woff');
}


@layer components {
  .btn {
    @apply py-3 px-8 font-bold transition-colors duration-300 text-lg;
  }
  
  .btn--outline {
    @apply border-2 border-white text-white hover:bg-white hover:text-black;
  }

  .btn--primary {
    @apply bg-primary border-2 border-primary hover:border-primary-dark hover:bg-primary-dark  text-white font-bold  transition-colors duration-300 text-lg;
  }
}

/* The admin app installed on an iPhone or iPad home screen. From iOS 26 the
   system lays a blur over the page, fading out ~35pt below the status bar,
   whenever the page runs under the status bar — which it does after the
   first navigation, though not at launch. Nothing turns the blur off, so
   the header's row sits below it; the header's own background fills the
   band. (Outside layers, so it overrides the header's pt-[…] utility.) */
@media (display-mode: standalone) {
  @supports (-webkit-touch-callout: none) {
    .app-header {
      padding-top: calc(2.5rem + env(safe-area-inset-top));
    }
  }
}

/* Text boxes that grow with what's typed, as in Fizzy: field-sizing does it
   where the browser supports it; elsewhere autoresize_controller mirrors
   the text into the wrapper's ::after, which sizes the grid cell the box
   fills. Either way they stop growing and scroll at --autoresize-max: 40%
   of a phone's screen, so the send button stays above the keyboard, and
   half the window on anything wider. */
:root {
  --autoresize-max: 40dvh;
}

@media (min-width: 640px) {
  :root {
    --autoresize-max: 50dvh;
  }
}

.autoresize__textarea {
  min-height: calc(3lh + 2 * var(--autoresize-padding-block, 0.75rem) + 2px);
  max-height: var(--autoresize-max);
}

@supports (field-sizing: content) {
  .autoresize__textarea {
    field-sizing: content;
  }
}

@supports not (field-sizing: content) {
  .autoresize__wrapper {
    display: grid;
    position: relative;
    max-height: var(--autoresize-max);
  }

  .autoresize__wrapper > *, .autoresize__wrapper::after {
    grid-area: 1 / 1 / 2 / 2;
  }

  /* Matches the box's padding, border and type so the copy wraps the same. */
  .autoresize__wrapper::after {
    content: attr(data-autoresize-clone-value) " ";
    visibility: hidden;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    overflow: hidden;
    min-height: calc(3lh + 2 * var(--autoresize-padding-block, 0.75rem) + 2px);
    padding: var(--autoresize-padding-block, 0.75rem) var(--autoresize-padding-inline, 1rem);
    border: 1px solid transparent;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .autoresize__textarea {
    position: absolute;
    inset: 0;
    height: 100%;
    resize: none;
  }
}