/* Hallmark · genre: modern-minimal editorial · macrostructure: Catalogue / Workbench / Long Document · theme: CookClip paper · enrichment: existing product imagery · nav: N5 floating pill · footer: Ft1 mast-headed */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */
@import url("./premium-tokens.css?v=20260718-hallmark-5");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap");

html,
body {
  overflow-x: clip;
}

html {
  background: var(--color-paper);
}

body {
  background: var(--color-paper) !important;
  color: var(--color-ink) !important;
  font-family: var(--font-body) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand-name {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--color-ink);
  font-family: var(--font-display) !important;
  font-style: normal;
}

p,
li,
dd,
figcaption {
  text-wrap: pretty;
}

a,
button,
input,
select,
textarea,
summary {
  -webkit-tap-highlight-color: transparent;
}

button,
input,
select,
textarea,
summary,
.button {
  outline: 2px solid transparent;
  outline-offset: 1px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--color-focus) !important;
  outline-offset: 3px;
}

/* Shared floating navigation: the outer header stays invisible, the inner row floats. */
.site-header,
body > header {
  position: sticky !important;
  top: 0 !important;
  z-index: 40 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-top: 0.75rem;
  pointer-events: none;
}

.site-header .nav,
body > header > div {
  width: min(72rem, calc(100% - 2rem));
  min-height: 3.7rem !important;
  margin-inline: auto !important;
  border: var(--rule-hairline) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--color-nav) !important;
  box-shadow: var(--shadow-nav) !important;
  padding: 0.5rem 0.6rem 0.5rem 0.9rem !important;
  backdrop-filter: blur(1.25rem) saturate(125%);
  -webkit-backdrop-filter: blur(1.25rem) saturate(125%);
  pointer-events: auto;
}

.brand,
body > header a[aria-label*="home" i] {
  white-space: nowrap;
}

.nav-links a,
body > header a {
  white-space: nowrap;
}

.nav-links .nav-cta,
.nav-cta,
.button-primary {
  background: var(--color-coral) !important;
  color: var(--color-accent-ink) !important;
}

.nav-links .nav-cta:hover,
.nav-cta:hover,
.button-primary:hover {
  background: var(--color-ink) !important;
}

button:active,
.button:active,
.nav-cta:active,
.nav-links a:active {
  transform: translateY(1px);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: 0.55 !important;
}

/* Quiet page canvas and restrained section rhythm. */
.hero,
.ingredient-hero,
.hub-hero,
.content-hero,
.page-hero,
body > main > section:first-child {
  background: transparent !important;
}

.section,
.editorial-section,
.hub-section,
.content-section,
.article-section,
.blog-cluster,
body > main > section {
  border-color: var(--color-rule) !important;
}

body > main > section {
  border-inline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.section-soft,
.tonal,
.editorial-section.tonal,
.screen-gallery,
.cluster-nav {
  background: var(--color-paper-deep) !important;
}

.hero h1,
.ingredient-hero h1,
.hub-hero h1,
.content-hero h1,
.page-hero h1,
body > main > section:first-child h1,
body > main > h1 {
  color: var(--color-coral) !important;
  font-size: var(--text-display);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.section-heading h2,
.section-copy h2,
.section-intro h2,
.article-body h2,
.article-copy h2,
.prose h2,
body > main > section > h2,
body > main > section > header h2 {
  color: var(--color-forest);
}

main > section:nth-of-type(3n + 2) > .page .section-heading h2,
main > section:nth-of-type(3n + 2) > .page .section-copy h2,
main > section:nth-of-type(3n + 2) > header h2,
main > section:nth-of-type(3n + 2) > h2 {
  color: var(--color-ochre);
}

main > section:nth-of-type(3n) > .page .section-heading h2,
main > section:nth-of-type(3n) > .page .section-copy h2,
main > section:nth-of-type(3n) > header h2,
main > section:nth-of-type(3n) > h2 {
  color: var(--color-plum);
}

.eyebrow,
.method-label,
.post-meta,
.basket-label {
  color: var(--color-slate) !important;
}

/* Editorial rows replace decorative cards across every page family. */
.step-card,
.guide-item,
.faq-item,
.soft-panel,
.import-method-card,
.source-card,
.card-link,
.blog-card,
.flow-card,
.video-card,
.floating-card,
.seo-panel,
.card,
.callout,
.tool-card,
.example-card,
.related-card,
.criterion,
.best-for,
.pros-watchouts > div,
.faq-stack details,
.faq-list details,
.detail-grid article,
.ingredient-directory a,
.app-screenshot-card,
.screenshot-card,
.side-card,
.feature-card,
.benefit-card,
.pricing-card,
.plan-card,
.post-card,
body > main article:not(.form-panel):not(.result-panel):not(.calculator-card) {
  border: 0 !important;
  border-top: var(--rule-hairline) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Standalone Tailwind pages use utility-only card names. Flatten their content
   containers without touching buttons, inputs, navigation, or product media. */
body > main :is(section, article, aside)[class*="rounded-"],
body > main div[class*="rounded-"]:has(> h2, > h3, > p, > ul, > ol, > details),
body > main a[class*="rounded-"]:has(> h2, > h3, > p),
body > main table[class*="rounded-"] {
  border: 0 !important;
  border-top: var(--rule-hairline) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body > main div[class*="rounded-"]:has(> details) {
  overflow: visible !important;
}

.quick-steps,
.card-grid,
.tool-grid,
.examples-grid,
.detail-grid,
.related-grid,
.ingredient-directory,
.post-grid,
.criteria-grid,
.pros-watchouts,
.import-methods,
.faq-list,
.faq-grid,
.feature-grid,
.flow-cards {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

.quick-steps > *,
.card-grid > *,
.tool-grid > *,
.examples-grid > *,
.detail-grid > *,
.related-grid > *,
.ingredient-directory > *,
.post-grid > *,
.criteria-grid > *,
.pros-watchouts > *,
.import-methods > *,
.faq-list > *,
.faq-grid > *,
.feature-grid > *,
.flow-cards > * {
  min-width: 0;
  padding-inline: 0 !important;
  padding-block: clamp(1.4rem, 3vw, 2.2rem) !important;
}

/* Tailwind-authored pages use unnamed grids. Detect content blocks by their
   direct heading or prose instead of relying on a card class name. */
body > main .grid:has(> article[class*="rounded-"]),
body > main .grid:has(> a[class*="rounded-"]:has(> h2, > h3, > p)),
body > main .grid:has(> div[class*="rounded-"]:has(> h2, > h3, > p, > ul, > ol)) {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

body > main .grid:has(> article[class*="rounded-"]) > article,
body > main .grid:has(> a[class*="rounded-"]:has(> h2, > h3, > p)) > a,
body > main .grid:has(> div[class*="rounded-"]:has(> h2, > h3, > p, > ul, > ol)) > div {
  min-width: 0;
  border: 0 !important;
  border-top: var(--rule-hairline) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-inline: 0 !important;
  padding-block: clamp(1.4rem, 3vw, 2.2rem) !important;
}

body > main > section[class*="rounded-"] {
  padding-inline: 0 !important;
}

body > main > section:first-child[class*="rounded-"] {
  border-top: 0 !important;
}

.related-tools {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

.related-tools > a {
  width: 100%;
  border: 0 !important;
  border-top: var(--rule-hairline) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: var(--space-lg) 0 !important;
}

.quick-steps > *:nth-child(4n + 1) h2,
.quick-steps > *:nth-child(4n + 1) h3,
.card-grid > *:nth-child(4n + 1) h2,
.card-grid > *:nth-child(4n + 1) h3,
.tool-grid > *:nth-child(4n + 1) h2,
.examples-grid > *:nth-child(4n + 1) h3,
.detail-grid > *:nth-child(4n + 1) h2,
.related-grid > *:nth-child(4n + 1) h2,
.related-grid > *:nth-child(4n + 1) h3,
.post-grid > *:nth-child(4n + 1) h3,
body > main article:nth-of-type(4n + 1) h2,
body > main article:nth-of-type(4n + 1) h3 {
  color: var(--color-coral) !important;
}

.quick-steps > *:nth-child(4n + 2) h2,
.quick-steps > *:nth-child(4n + 2) h3,
.card-grid > *:nth-child(4n + 2) h2,
.card-grid > *:nth-child(4n + 2) h3,
.tool-grid > *:nth-child(4n + 2) h2,
.examples-grid > *:nth-child(4n + 2) h3,
.detail-grid > *:nth-child(4n + 2) h2,
.related-grid > *:nth-child(4n + 2) h2,
.related-grid > *:nth-child(4n + 2) h3,
.post-grid > *:nth-child(4n + 2) h3,
body > main article:nth-of-type(4n + 2) h2,
body > main article:nth-of-type(4n + 2) h3 {
  color: var(--color-forest) !important;
}

.quick-steps > *:nth-child(4n + 3) h2,
.quick-steps > *:nth-child(4n + 3) h3,
.card-grid > *:nth-child(4n + 3) h2,
.card-grid > *:nth-child(4n + 3) h3,
.tool-grid > *:nth-child(4n + 3) h2,
.examples-grid > *:nth-child(4n + 3) h3,
.detail-grid > *:nth-child(4n + 3) h2,
.related-grid > *:nth-child(4n + 3) h2,
.related-grid > *:nth-child(4n + 3) h3,
.post-grid > *:nth-child(4n + 3) h3,
body > main article:nth-of-type(4n + 3) h2,
body > main article:nth-of-type(4n + 3) h3 {
  color: var(--color-ochre) !important;
}

.quick-steps > *:nth-child(4n) h2,
.quick-steps > *:nth-child(4n) h3,
.card-grid > *:nth-child(4n) h2,
.card-grid > *:nth-child(4n) h3,
.tool-grid > *:nth-child(4n) h2,
.examples-grid > *:nth-child(4n) h3,
.detail-grid > *:nth-child(4n) h2,
.related-grid > *:nth-child(4n) h2,
.related-grid > *:nth-child(4n) h3,
.post-grid > *:nth-child(4n) h3,
body > main article:nth-of-type(4n) h2,
body > main article:nth-of-type(4n) h3 {
  color: var(--color-plum) !important;
}

.idea-row:nth-child(4n + 1) h3,
.feature-list > a:nth-child(4n + 1) h2,
.step-list article:nth-child(4n + 1) h2,
.article-step:nth-child(4n + 1) h3,
.faq-list > article:nth-child(4n + 1) h3,
.substitution-option:nth-child(4n + 1) h3,
.grocery-group:nth-child(4n + 1) h3,
.article-body > section:nth-of-type(4n + 1) h2 {
  color: var(--color-coral) !important;
}

.idea-row:nth-child(4n + 2) h3,
.feature-list > a:nth-child(4n + 2) h2,
.step-list article:nth-child(4n + 2) h2,
.article-step:nth-child(4n + 2) h3,
.faq-list > article:nth-child(4n + 2) h3,
.substitution-option:nth-child(4n + 2) h3,
.grocery-group:nth-child(4n + 2) h3,
.article-body > section:nth-of-type(4n + 2) h2 {
  color: var(--color-forest) !important;
}

.idea-row:nth-child(4n + 3) h3,
.feature-list > a:nth-child(4n + 3) h2,
.step-list article:nth-child(4n + 3) h2,
.article-step:nth-child(4n + 3) h3,
.faq-list > article:nth-child(4n + 3) h3,
.substitution-option:nth-child(4n + 3) h3,
.grocery-group:nth-child(4n + 3) h3,
.article-body > section:nth-of-type(4n + 3) h2 {
  color: var(--color-ochre) !important;
}

.idea-row:nth-child(4n) h3,
.feature-list > a:nth-child(4n) h2,
.step-list article:nth-child(4n) h2,
.article-step:nth-child(4n) h3,
.faq-list > article:nth-child(4n) h3,
.substitution-option:nth-child(4n) h3,
.grocery-group:nth-child(4n) h3,
.article-body > section:nth-of-type(4n) h2 {
  color: var(--color-plum) !important;
}

/* Functions are assertive; their supporting copy reads as a quieter second level. */
.idea-row h3,
.feature-list h2,
.step-list h2,
.article-step h3,
.tool-card h2,
.card h2,
.card h3,
.related-card h2,
.related-card h3 {
  font-weight: 750;
}

.idea-row p,
.feature-list p,
.step-list p,
.article-step p,
.tool-card p,
.card p,
.related-card p,
body > main article p,
body > main article li {
  color: var(--color-ink-soft) !important;
}

li::marker {
  color: var(--color-coral);
}

.tool-icon {
  border: var(--rule-hairline) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Interactive groups use the same flat editorial language. Individual fields,
   buttons, tables, and product screenshots keep their functional affordance. */
.form-panel,
.result-panel,
.calculator-card,
.tool-form,
.tool-result,
.timer-card,
.ingredient-basket,
.comparison-wrap,
.cta-panel,
.quick-answer,
.disclosure,
.article-cta,
.prep-panel,
.mistakes-panel,
.checklist-panel,
.result-item,
.recommendation,
.compact-note,
.preset,
.grocery-group,
.substitution-option,
.timer-face,
.chart-wrap,
.pan-group {
  border: 0 !important;
  border-block: var(--rule-hairline) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.cta-panel {
  background: transparent !important;
  color: var(--color-ink) !important;
}

.cta-panel h2 {
  color: var(--color-coral) !important;
}

.cta-panel p {
  color: var(--color-ink-soft) !important;
}

.ingredient-basket {
  background: var(--color-paper-deep) !important;
}

.site-footer,
body > footer {
  border: 0 !important;
  background: var(--color-footer) !important;
  color: var(--color-footer-soft) !important;
  box-shadow: none !important;
}

.site-footer h2,
.site-footer h3,
.site-footer strong,
.site-footer .brand-name,
body > footer h2,
body > footer h3,
body > footer strong,
body > footer [class*="font-semibold"] {
  color: var(--color-footer-ink) !important;
}

.site-footer a,
body > footer a {
  color: var(--color-footer-soft) !important;
  white-space: nowrap;
}

.site-footer a:hover,
body > footer a:hover {
  color: var(--color-paper-raised) !important;
}

@media (max-width: 53.75rem) {
  .site-header,
  body > header {
    padding-top: 0.5rem;
  }

  .site-header .nav,
  body > header > div {
    width: calc(100% - 1rem);
    min-height: 3.45rem !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--space-xs) !important;
    padding: 0.42rem 0.48rem 0.42rem 0.72rem !important;
  }

  .nav-links {
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    margin-left: auto;
  }

  .nav-links > a:not(.nav-cta),
  body > header nav,
  body > header a:not([aria-label*="home" i]):not(:last-child) {
    display: none !important;
  }

  .nav-cta,
  .nav-links .nav-cta,
  body > header a:last-child {
    display: inline-flex !important;
    min-height: 2.55rem;
    align-items: center;
    white-space: nowrap;
  }

  .brand-name {
    font-size: 0.95rem !important;
  }

  .hero h1,
  .ingredient-hero h1,
  .hub-hero h1,
  .content-hero h1,
  .page-hero h1,
  body > main > section:first-child h1,
  body > main > h1 {
    font-size: clamp(2.35rem, 11vw, 3.45rem) !important;
  }
}

@media (max-width: 40rem) {
  .page,
  body > main {
    min-width: 0;
  }

  .section-heading,
  .section-copy,
  .section-intro {
    display: block !important;
    min-width: 0;
  }

  .button,
  button,
  input,
  select,
  textarea,
  summary {
    min-height: 2.75rem;
  }

  .site-footer a,
  body > footer a {
    min-height: 2.75rem;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}