@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Lato:wght@400;700&family=Manrope:wght@400;500;600;700&family=Merriweather:wght@400;700&family=Montserrat:wght@400;500;600;700&family=Nunito:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&family=Playfair+Display:wght@400;600;700&family=Poppins:wght@400;500;600;700&family=PT+Serif:wght@400;700&family=Rubik:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Work+Sans:wght@400;500;600;700&display=swap");

:root,
[data-theme="beeachef-custom"] {
  color-scheme: light;
  --bee-primary: #d97706;
  --bee-secondary: #4d6b57;
  --bee-accent: #c0841a;
  --bee-bg: #fff1c9;
  --bee-surface: #ffe5a8;
  --bee-text: #2c2319;
  --bee-primary-content: #fffaf0;
  --bee-secondary-content: #f7fff2;
  --bee-accent-content: #2c1f0b;
  --bee-neutral: color-mix(in srgb, var(--bee-text) 82%, var(--bee-secondary) 18%);
  --bee-neutral-content: #fffaf0;
  --app-font-family: Inter, sans-serif;
  --app-font-scale: 1;

  --color-base-100: var(--bee-bg);
  --color-base-200: color-mix(in srgb, var(--bee-surface) 78%, var(--bee-bg) 22%);
  --color-base-300: color-mix(in srgb, var(--bee-surface) 68%, var(--bee-text) 32%);
  --color-base-content: var(--bee-text);
  --color-primary: var(--bee-primary);
  --color-primary-content: var(--bee-primary-content);
  --color-secondary: var(--bee-secondary);
  --color-secondary-content: var(--bee-secondary-content);
  --color-accent: var(--bee-accent);
  --color-accent-content: var(--bee-accent-content);
  --color-neutral: var(--bee-neutral);
  --color-neutral-content: var(--bee-neutral-content);
  --color-info: #2f6f8f;
  --color-info-content: #f4fbff;
  --color-success: #2f9e44;
  --color-success-content: #f5fff6;
  --color-warning: #d88b32;
  --color-warning-content: #2c1b05;
  --color-error: #c44732;
  --color-error-content: #fff7f4;
  --radius-selector: 0.5rem;
  --radius-field: 0.5rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--app-font-family);
  font-size: calc(16px * var(--app-font-scale));
}

body {
  min-height: 100vh;
  font-family: var(--app-font-family);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--bee-accent) 20%, transparent), transparent 38%),
    radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--bee-secondary) 16%, transparent), transparent 46%),
    var(--color-base-100);
}

.hero-food {
  background-image: url("https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=1800&q=85");
  background-position: center;
  background-size: cover;
}

.auth-surface {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bee-primary) 12%, transparent), transparent 44%),
    linear-gradient(315deg, color-mix(in srgb, var(--bee-secondary) 16%, transparent), transparent 50%);
}

.cooking-mode-shell {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bee-neutral) 12%, var(--color-base-100)), var(--color-base-100)),
    var(--color-base-100);
}

.line-clamp-2,
.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  -webkit-line-clamp: 3;
}

.theme-swatch {
  cursor: pointer;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--swatch-bg) 72%, transparent), transparent),
    var(--color-base-100);
}

.theme-swatch > span:last-child span {
  display: inline-block;
  width: 2rem;
  height: 1.25rem;
  border-radius: var(--radius-field);
  border: 1px solid color-mix(in srgb, var(--bee-text) 16%, transparent);
}

.theme-swatch > span:last-child span:nth-child(1) {
  background: var(--swatch-primary);
}

.theme-swatch > span:last-child span:nth-child(2) {
  background: var(--swatch-secondary);
}

.theme-swatch > span:last-child span:nth-child(3) {
  background: var(--swatch-bg);
}

.rating-text {
  letter-spacing: 0;
}

.recipe-card-grid {
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.recipe-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.recipe-card > a {
  display: block;
  flex: none;
}

.recipe-card-media {
  flex: none;
}

.recipe-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.recipe-card-heading {
  min-height: 3.75rem;
}

.recipe-card-title {
  align-items: flex-start;
  min-height: 2.6rem;
}

.recipe-card-description {
  min-height: 4.25rem;
}

.recipe-card-author {
  min-height: 1.25rem;
}

.recipe-card-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.recipe-card-match-slot {
  min-height: 1.5rem;
}

.recipe-card-meta {
  min-height: 1.5rem;
}

.hero-browse-action {
  min-height: 3.25rem;
  padding-inline: 1.85rem 2rem;
  border: 1px solid color-mix(in srgb, var(--bee-primary) 62%, var(--bee-accent) 38%);
  border-radius: calc(var(--radius-field) + 0.35rem);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--bee-primary) 88%, var(--bee-surface) 12%) 0%,
      color-mix(in srgb, var(--bee-accent) 70%, var(--bee-secondary) 30%) 100%
    );
  color: var(--bee-primary-content) !important;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow:
    0 1rem 2.2rem color-mix(in srgb, var(--bee-primary) 34%, transparent),
    0 0 0 1px color-mix(in srgb, #ffffff 16%, transparent) inset,
    inset 0 1px 0 color-mix(in srgb, #ffffff 36%, transparent);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--bee-text) 28%, transparent);
  transition:
    background 170ms ease,
    border-color 170ms ease,
    box-shadow 170ms ease,
    transform 170ms ease;
}

.hero-browse-action:hover {
  border-color: color-mix(in srgb, var(--bee-accent) 72%, var(--bee-primary) 28%);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--bee-primary) 78%, var(--bee-accent) 22%) 0%,
      color-mix(in srgb, var(--bee-accent) 86%, var(--bee-secondary) 14%) 100%
    );
  box-shadow:
    0 1.15rem 2.55rem color-mix(in srgb, var(--bee-primary) 42%, transparent),
    0 0 0 1px color-mix(in srgb, #ffffff 20%, transparent) inset,
    inset 0 1px 0 color-mix(in srgb, #ffffff 42%, transparent);
  transform: translateY(-2px);
}

.hero-browse-action:active {
  box-shadow:
    0 0.55rem 1.25rem color-mix(in srgb, var(--bee-primary) 30%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 24%, transparent);
  transform: translateY(0);
}

.hero-browse-action:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--bee-accent) 72%, #ffffff 28%);
  outline-offset: 3px;
}

.hero-browse-action svg {
  stroke-width: 2.7;
}

.create-recipe-action {
  min-height: 2.35rem;
  height: 2.35rem;
  padding-inline: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--bee-primary) 54%, var(--bee-accent) 46%);
  border-radius: calc(var(--radius-field) + 0.25rem);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--bee-primary) 92%, var(--bee-surface) 8%) 0%,
      color-mix(in srgb, var(--bee-accent) 78%, var(--bee-secondary) 22%) 100%
    );
  color: var(--bee-primary-content) !important;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow:
    0 0.55rem 1.1rem color-mix(in srgb, var(--bee-primary) 22%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 32%, transparent);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--bee-text) 18%, transparent);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.create-recipe-action:hover {
  border-color: color-mix(in srgb, var(--bee-accent) 68%, var(--bee-primary) 32%);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--bee-primary) 84%, var(--bee-accent) 16%) 0%,
      color-mix(in srgb, var(--bee-accent) 88%, var(--bee-secondary) 12%) 100%
    );
  box-shadow:
    0 0.7rem 1.35rem color-mix(in srgb, var(--bee-primary) 30%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 38%, transparent);
  transform: translateY(-1px);
}

.create-recipe-action:active {
  box-shadow:
    0 0.35rem 0.7rem color-mix(in srgb, var(--bee-primary) 22%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 24%, transparent);
  transform: translateY(0);
}

.create-recipe-action:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--bee-accent) 70%, var(--bee-primary) 30%);
  outline-offset: 2px;
}

.create-recipe-action svg {
  stroke-width: 2.6;
}

[data-auth-visible],
[data-pro-visible],
[data-admin-visible] {
  display: none !important;
}

html[data-authenticated="true"] [data-auth-visible] {
  display: inline-flex !important;
}

html[data-authenticated="true"] section[data-auth-visible],
html[data-authenticated="true"] div[data-auth-visible][class*="grid"] {
  display: block !important;
}

html[data-authenticated="true"] [data-auth-hidden] {
  display: none !important;
}

html[data-account-type="professional"] [data-pro-visible],
html[data-role="admin"] [data-admin-visible] {
  display: list-item !important;
}

.navbar [data-pro-visible],
.navbar [data-admin-visible] {
  display: none !important;
}

html[data-account-type="professional"] .navbar [data-pro-visible],
html[data-role="admin"] .navbar [data-admin-visible] {
  display: list-item !important;
}

.htmx-request .skeleton {
  opacity: 0.72;
}

@media (max-width: 640px) {
  html[data-authenticated="true"] .navbar .create-recipe-action {
    display: none !important;
  }

  .hero-food {
    min-height: 40rem;
  }

  .hero-food .hero-content {
    max-width: 100%;
    overflow: hidden;
    padding-inline: 1rem;
  }

  .hero-food .hero-content > div {
    width: 100%;
    max-width: calc(100vw - 2rem);
  }

  .hero-food h1 {
    width: 100%;
    max-width: 18.5rem !important;
    margin-inline: auto;
    font-size: 2rem !important;
    line-height: 1.12 !important;
    overflow-wrap: break-word;
    text-wrap: wrap;
  }

  .hero-food p {
    width: 100%;
    max-width: 18.5rem !important;
    margin-inline: auto;
    font-size: 1rem !important;
    line-height: 1.45 !important;
    overflow-wrap: break-word;
  }

  .hero-food .mt-8 {
    width: 100%;
    max-width: 18.5rem !important;
    margin-inline: auto;
  }

  .hero-food .btn {
    width: 100%;
    max-width: 100%;
  }

  main section {
    max-width: 100vw;
    overflow-x: hidden;
  }

  main section h1,
  main section h2,
  main section p {
    max-width: 18.5rem;
    overflow-wrap: break-word;
  }
}