/*
Theme Name: Angkor Food
Theme URI: https://www.angkorfood.com/
Author: Angkor Food
Description: A custom block theme for Angkor Food, designed for home cooks and powered by an embedded Lightspeed storefront.
Version: 0.2.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: angkor-food
*/

:root {
  --angkor-cream: #fbf7ed;
  --angkor-paper: #fffdf8;
  --angkor-ink: #26231f;
  --angkor-muted: #6d675e;
  --angkor-red: #8d2e2f;
  --angkor-red-dark: #672022;
  --angkor-gold: #d4a64a;
  --angkor-green: #294f3f;
  --angkor-line: rgba(38, 35, 31, 0.14);
  --angkor-shadow: 0 18px 50px rgba(62, 42, 24, 0.12);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--angkor-paper);
  color: var(--angkor-ink);
}

a {
  text-underline-offset: 0.18em;
}

.wp-site-blocks {
  overflow: hidden;
}

.angkor-announcement {
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.angkor-header-shell {
  border-bottom: 1px solid var(--angkor-line);
  backdrop-filter: blur(14px);
}

.angkor-wordmark {
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.angkor-wordmark a {
  text-decoration: none;
}

.angkor-primary-nav a {
  text-decoration: none;
}

.angkor-primary-nav a:hover,
.angkor-primary-nav a:focus-visible {
  color: var(--angkor-red);
}

.wp-block-button__link {
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.wp-block-button__link:hover {
  transform: translateY(-2px);
}

.angkor-button-outline .wp-block-button__link {
  background: transparent;
  border: 1px solid currentColor;
  color: var(--angkor-red-dark);
}

.angkor-button-outline .wp-block-button__link:hover {
  background: var(--angkor-red-dark);
  color: #fff;
}

.angkor-eyebrow {
  color: var(--angkor-red);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.angkor-hero {
  background:
    radial-gradient(circle at 85% 20%, rgba(212, 166, 74, 0.2), transparent 24rem),
    linear-gradient(135deg, var(--angkor-cream), #fff 68%);
  position: relative;
}

.angkor-hero::before {
  background: var(--angkor-red);
  content: "";
  height: 0.35rem;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.angkor-hero-title {
  max-width: 12ch;
}

.angkor-hero-copy {
  color: var(--angkor-muted);
  max-width: 39rem;
}

.angkor-hero-art {
  align-items: flex-end;
  aspect-ratio: 4 / 4.6;
  background:
    linear-gradient(180deg, transparent 48%, rgba(22, 19, 15, 0.72)),
    radial-gradient(circle at 50% 38%, rgba(255, 231, 169, 0.94) 0 18%, transparent 18.5%),
    radial-gradient(circle at 44% 40%, #bc4e37 0 30%, transparent 30.5%),
    radial-gradient(circle at 62% 29%, #557758 0 22%, transparent 22.5%),
    linear-gradient(145deg, #dec998, #7e3b31);
  border-radius: 18rem 18rem 1.5rem 1.5rem;
  box-shadow: var(--angkor-shadow);
  display: flex;
  min-height: 34rem;
  overflow: hidden;
  position: relative;
}

.angkor-hero-art::after {
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: inherit;
  content: "";
  inset: 1rem;
  position: absolute;
}

.angkor-photo-note {
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  margin: 0;
  padding: 2rem;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
}

.angkor-trust-strip {
  border-bottom: 1px solid var(--angkor-line);
  border-top: 1px solid var(--angkor-line);
}

.angkor-trust-item + .angkor-trust-item {
  border-left: 1px solid var(--angkor-line);
}

.angkor-section-intro {
  max-width: 46rem;
}

.angkor-category-card {
  border: 1px solid var(--angkor-line);
  border-radius: 1rem;
  min-height: 24rem;
  overflow: hidden;
  position: relative;
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.angkor-category-card:hover {
  box-shadow: var(--angkor-shadow);
  transform: translateY(-4px);
}

.angkor-category-visual {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.42), transparent 7rem),
    linear-gradient(135deg, rgba(141, 46, 47, 0.92), rgba(41, 79, 63, 0.86));
  min-height: 14rem;
}

.angkor-category-card:nth-child(2) .angkor-category-visual {
  background:
    radial-gradient(circle at 67% 30%, rgba(255, 255, 255, 0.4), transparent 6rem),
    linear-gradient(135deg, #466a4d, #b5a85d);
}

.angkor-category-card:nth-child(3) .angkor-category-visual {
  background:
    radial-gradient(circle at 45% 30%, rgba(255, 255, 255, 0.42), transparent 6rem),
    linear-gradient(135deg, #c47b3c, #713b2e);
}

.angkor-category-card a {
  text-decoration: none;
}

.angkor-product-card {
  border-bottom: 1px solid var(--angkor-line);
}

.angkor-product-visual {
  align-items: center;
  aspect-ratio: 1 / 1;
  background: var(--angkor-cream);
  border-radius: 0.75rem;
  display: flex;
  justify-content: center;
}

.angkor-product-bottle {
  background: linear-gradient(180deg, #2b2925 0 15%, var(--angkor-red) 15% 68%, #301c16 68%);
  border-radius: 0.65rem 0.65rem 1rem 1rem;
  box-shadow: 0 16px 25px rgba(30, 20, 10, 0.2);
  height: 10rem;
  position: relative;
  width: 4.2rem;
}

.angkor-product-bottle::after {
  background: var(--angkor-gold);
  content: "ANGKOR";
  color: #fff;
  font-size: 0.5rem;
  font-weight: 700;
  left: 0;
  letter-spacing: 0.08em;
  padding: 0.65rem 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 42%;
}

.angkor-recipe-feature {
  background:
    linear-gradient(90deg, rgba(34, 29, 23, 0.8), rgba(34, 29, 23, 0.12)),
    radial-gradient(circle at 72% 52%, #d4ad5c 0 16%, transparent 16.5%),
    radial-gradient(circle at 73% 51%, #8d2e2f 0 31%, transparent 31.5%),
    linear-gradient(135deg, #3b604b, #c8874a);
  border-radius: 1.25rem;
  box-shadow: var(--angkor-shadow);
  min-height: 36rem;
  overflow: hidden;
  position: relative;
}

.angkor-recipe-feature::after {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.85rem;
  content: "";
  inset: 1rem;
  pointer-events: none;
  position: absolute;
}

.angkor-recipe-copy {
  max-width: 34rem;
  position: relative;
  z-index: 1;
}

.angkor-story-panel {
  background: var(--angkor-green);
  border-radius: 1.25rem;
  box-shadow: var(--angkor-shadow);
  overflow: hidden;
}

.angkor-founder-visual {
  align-items: flex-end;
  background:
    linear-gradient(180deg, transparent, rgba(29, 25, 20, 0.62)),
    radial-gradient(circle at 50% 36%, #dbb184 0 17%, transparent 17.5%),
    linear-gradient(145deg, #d9b66a, #7f302b);
  display: flex;
  min-height: 34rem;
}

.angkor-certification {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fff;
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  padding: 0.55rem 0.85rem;
  text-transform: uppercase;
}

.angkor-path-card {
  border: 1px solid var(--angkor-line);
  border-radius: 1rem;
  min-height: 18rem;
}

.angkor-footer {
  border-top: 0.4rem solid var(--angkor-gold);
}

.angkor-footer a {
  color: inherit;
}

.angkor-page-hero {
  background: linear-gradient(135deg, var(--angkor-cream), #fff);
  border-bottom: 1px solid var(--angkor-line);
}

.angkor-content-shell > * {
  max-width: 760px;
}

.angkor-content-shell > .alignwide {
  max-width: 1180px;
}

.angkor-content-shell > .alignfull {
  max-width: none;
}

.angkor-lightspeed-shell {
  min-height: 28rem;
}

@media (max-width: 900px) {
  .angkor-header-shell .wp-block-site-title {
    font-size: 1.35rem !important;
  }

  .angkor-hero-art {
    min-height: 28rem;
  }

  .angkor-trust-item + .angkor-trust-item {
    border-left: 0;
    border-top: 1px solid var(--angkor-line);
  }
}

@media (max-width: 600px) {
  .angkor-announcement {
    font-size: 0.68rem !important;
  }

  .angkor-hero-title {
    font-size: clamp(3rem, 16vw, 4.6rem) !important;
  }

  .angkor-hero-art,
  .angkor-founder-visual {
    min-height: 23rem;
  }

  .angkor-recipe-feature {
    min-height: 30rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}