@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));
    }
  }
}