/* Site-specific layout for Connor's Kitchen.
 *
 * Everything here is composition and spacing — colour, type, radius, and
 * elevation all come from Corn UI's tokens, so the site tracks the Corndog
 * Development palette (purple primary, indigo secondary) with no restated
 * hex values and no overrides to keep in sync. */

/* The filter hides cards, group headers, and buttons with the `hidden`
 * attribute. The UA stylesheet's [hidden] { display: none } is weaker than any
 * author display rule, and .card sets display:flex while .corn-button sets
 * display:inline-flex — so without this, hiding silently does nothing and the
 * search box looks broken while working perfectly. */
[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--corn-bg-secondary);
  color: var(--corn-text-primary);
  font-family: var(--corn-font-family);
}

.corn-layout {
  min-height: 100%;
}

.corn-layout__main {
  padding: var(--corn-spacing-xl) 0 calc(var(--corn-spacing-xl) * 2);
}

/* --- header bar ------------------------------------------------------- */

.site-bar,
.site-foot {
  display: flex;
  align-items: center;
  gap: var(--corn-spacing-md);
}

.site-bar {
  justify-content: space-between;
}

.site-foot {
  justify-content: center;
}

.site-brand {
  text-decoration: none;
  color: inherit;
}

.site-brand .corn-heading {
  margin: 0;
  /* The one place the brand colour is stated outright, and it is stated as a
     gradient across the two brand tokens rather than as fixed hexes. */
  background: linear-gradient(90deg, var(--corn-primary), var(--corn-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Corn UI's nav marks the current page; the site only has to say where the
   underline sits. */
.corn-nav__link--active {
  box-shadow: inset 0 -2px 0 var(--corn-primary);
}

/* --- page heading ----------------------------------------------------- */

.page-head {
  margin-bottom: var(--corn-spacing-xl);
}

.page-head .eyebrow {
  display: block;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--corn-spacing-xs);
}

.page-head h1 {
  margin: 0 0 var(--corn-spacing-sm);
}

.page-head p {
  margin: 0;
  max-width: 60ch;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--corn-spacing-xs);
  margin-bottom: var(--corn-spacing-lg);
  text-decoration: none;
}

/* --- search and facets ------------------------------------------------ */

.search-wrap {
  position: relative;
  margin-bottom: var(--corn-spacing-lg);
}

.search-wrap input {
  padding-left: calc(var(--corn-spacing-xl) + var(--corn-spacing-xs));
}

.search-icon {
  position: absolute;
  left: var(--corn-spacing-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--corn-text-tertiary);
  pointer-events: none;
}

.facets {
  display: flex;
  flex-direction: column;
  gap: var(--corn-spacing-sm);
  margin-bottom: var(--corn-spacing-md);
}

.facet-row {
  display: flex;
  align-items: baseline;
  gap: var(--corn-spacing-sm);
  flex-wrap: wrap;
}

.facet-name {
  flex: 0 0 4.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.result-count {
  display: block;
  margin-bottom: var(--corn-spacing-lg);
}

/* --- category groups and cards ---------------------------------------- */

.group {
  margin-bottom: var(--corn-spacing-xl);
}

.group-head {
  display: flex;
  align-items: center;
  gap: var(--corn-spacing-md);
  margin-bottom: var(--corn-spacing-md);
}

.group-head .corn-heading {
  margin: 0;
  white-space: nowrap;
}

.group-rule {
  flex: 1;
  height: 1px;
  background: var(--corn-border-light);
}

.card-grid {
  --corn-grid-cols: 3;
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--corn-spacing-xs);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--corn-transition-base), transform var(--corn-transition-base);
}

.card:hover {
  box-shadow: var(--corn-shadow-md);
  transform: translateY(-2px);
}

.card:focus-visible {
  outline: none;
  box-shadow: var(--corn-focus-ring);
}

.card-label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card-title,
.card-desc {
  margin: 0;
}

.card-desc {
  flex: 1;
}

.card-meta {
  margin-top: var(--corn-spacing-xs);
}

/* Search hits, tinted from the brand colour rather than the browser default. */
mark {
  background: color-mix(in srgb, var(--corn-primary) 25%, transparent);
  color: inherit;
  border-radius: var(--corn-radius-sm);
  padding: 0 2px;
}

.empty-state {
  padding: var(--corn-spacing-xl) 0;
  text-align: center;
}

/* --- recipe page ------------------------------------------------------ */

.recipe-body {
  /* Tokens cascade, so scoping one override here gives the reading column a
     kitchen-legible body size without touching the global scale. */
  --corn-font-size-base: 16px;
  --corn-font-size-lg: 18px;

  max-width: 72ch;
}

.meta-strip {
  margin: 0 0 var(--corn-spacing-lg);
  padding: var(--corn-spacing-md);
  background: var(--corn-bg-primary);
  border: 1px solid var(--corn-border-light);
  border-radius: var(--corn-radius-md);
}

.meta-strip .corn-list__term {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guide-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--corn-spacing-lg);
  text-decoration: none;
  color: inherit;
  border-left: 3px solid var(--corn-secondary);
}

.guide-link:hover {
  background: var(--corn-bg-tertiary);
}

.section-label {
  margin: var(--corn-spacing-xl) 0 var(--corn-spacing-sm);
}

.slider-row {
  margin-bottom: var(--corn-spacing-md);
}

.slider-row .corn-slider {
  flex: 1;
  min-width: 8rem;
}

.scale-group-title {
  display: block;
  margin: var(--corn-spacing-md) 0 var(--corn-spacing-xs);
}

.scale-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--corn-spacing-md);
}

.scale-amount {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--corn-primary);
}

.total-block {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--corn-spacing-md);
}

.tag-block {
  display: flex;
  flex-direction: column;
  gap: var(--corn-spacing-xs);
  margin-top: var(--corn-spacing-xl);
  padding-top: var(--corn-spacing-lg);
  border-top: 1px solid var(--corn-border-light);
}

.tag-block .corn-label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: var(--corn-spacing-sm);
}

.tag-link {
  text-decoration: none;
}

/* --- rendered markdown --------------------------------------------------
 *
 * createMarkdown applies real Corn UI typography classes to every block it
 * emits — h2 becomes .corn-heading--2, p becomes .corn-text — and those ship
 * `margin: 0` by design, because block rhythm is composition and belongs to
 * the page rather than to the component. Long-form content is where that has
 * to be supplied, so the reading column sets it here in spacing tokens. */

.corn-markdown {
  display: flex;
  flex-direction: column;
  gap: var(--corn-spacing-md);
}

.corn-markdown > .corn-heading:not(:first-child) {
  margin-top: var(--corn-spacing-lg);
}

/* Lists keep `display: list-item` so the markers survive — the gap between
   items comes from the adjacent-sibling margin, not from flex. */
.corn-markdown__item + .corn-markdown__item {
  margin-top: var(--corn-spacing-xs);
}

.corn-markdown__list {
  padding-left: var(--corn-spacing-lg);
}

.corn-markdown .corn-code--block {
  padding: var(--corn-spacing-md);
  overflow-x: auto;
}

/* --- responsive ------------------------------------------------------- */

@media (max-width: 960px) {
  .card-grid {
    --corn-grid-cols: 2;
  }
}

@media (max-width: 640px) {
  .card-grid {
    --corn-grid-cols: 1;
  }

  .site-bar {
    flex-wrap: wrap;
    gap: var(--corn-spacing-sm);
  }

  .facet-name {
    flex-basis: 100%;
  }
}

/* Why a card is in the results, when the reason is a facet the card does not
   otherwise show — protein, method, equipment. Only rendered while searching. */
.card-why {
  margin-top: var(--corn-spacing-xs);
  padding-top: var(--corn-spacing-xs);
  border-top: 1px dashed var(--corn-border-light);
}

.card-why .corn-caption {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}