/* casual-cooking.com — site-owned styles.
 *
 * css/theme.css is the WordPress capture's own CSS, extracted in exact document
 * order. It is not edited. Everything the capture had no equivalent for — post
 * pages, the recipe card, the hub search, the sources block — lives here.
 *
 * Every colour below is one of the capture's own palette variables, so this
 * reads as the same site built out rather than a second design bolted on:
 *   --wp--preset--color--base          #F5F1EA  page ground, warm cream
 *   --wp--preset--color--primary       #938569  taupe, buttons and accents
 *   --wp--preset--color--mono-1/2      #4B5340  olive, headings and body
 *   --wp--preset--color--featured      #6C775C  sage, dates and kickers
 *   --wp--preset--color--mono-3        #E3DED4  hairlines
 *   --wp--preset--color--mono-4        #ebe6df  tinted panels
 * Fonts likewise: Instrument Serif (fontsecondary) for headings, Source Sans 3
 * for body, exactly as the theme sets them.
 *
 * Bump the ?v= on the site.css link in tools/build_casual_cooking.py when this
 * changes — css is served max-age=604800, and see the "?v= bump can be poisoned
 * by the rolling update" gotcha in CLAUDE.md before trusting a bump.
 */

/* ---------------------------------------------------------------- nav repair
 *
 * The capture is missing WordPress's core navigation stylesheet — `grep
 * responsive-container css/wp-navigation.css` returns nothing — and its
 * interactivity runtime. The result, on the live site since it went up: the
 * hamburger AND the mobile close button both visible at desktop width, and the
 * menu itself rendered as a stacked bulleted list.
 *
 * This restores the behaviour the theme intended rather than designing anything
 * new: a horizontal unbulleted row at desktop with both buttons hidden, and a
 * real overlay at mobile driven by the .is-menu-open class that the toggle
 * script in build_casual_cooking.py's TAIL already sets.
 */

.wp-block-navigation__container {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  display: none;
  padding: 4px;
  background: transparent;
  border: 0;
  color: currentColor;
  cursor: pointer;
}

.wp-block-navigation-item__content {
  text-decoration: none;
  color: var(--wp--preset--color--mono-1);
}

.wp-block-navigation-item__content:hover,
.wp-block-navigation-item__content[aria-current="page"] {
  color: var(--wp--preset--color--primary);
}

@media (max-width: 781px) {
  .wp-block-navigation__responsive-container-open {
    display: block;
  }

  /* Closed: the panel is out of the document entirely, so it cannot be
     tabbed into or read out while hidden. */
  .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }

  .wp-block-navigation__responsive-container.is-menu-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100000;
    padding: 20px;
    background: var(--wp--preset--color--base);
    overflow: auto;
  }

  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
  }

  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-top: 56px;
    font-size: var(--wp--preset--font-size--superbfont-medium);
  }
}

/* ---------------------------------------------------------------- post shell */

.cc-post {
  max-width: 760px;
  margin: 0 auto;
}

.cc-kicker {
  margin: 0 0 .35rem;
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--featured);
}

.cc-kicker a {
  text-decoration: none;
}

.cc-kicker a:hover {
  text-decoration: underline;
}

.cc-post > .wp-block-heading {
  margin: 0 0 .5rem;
}

.cc-post .wp-block-post-date {
  margin-bottom: 1.5rem;
}

.cc-hero {
  margin: 0 0 2rem;
}

.cc-hero img {
  width: 100%;
  height: auto;
  max-height: 520px;
  border-radius: 2px;
  object-fit: cover;
}

/* Body copy wants a longer measure and more air than the theme's default,
   which was tuned for short marketing blocks rather than an article. */
.cc-post-body p.wp-block-paragraph {
  font-size: var(--wp--preset--font-size--superbfont-small);
  line-height: 1.65;
  margin: 0 0 1.15rem;
}

.cc-post-body h2.wp-block-heading {
  margin: 2.25rem 0 .75rem;
  font-size: var(--wp--preset--font-size--large);
}

.cc-post-body a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------- disclosure */

/* Stands out from body copy on purpose. This is the line that tells a reader
   the Kitchen Notes section has never cooked anything; burying it in the same
   grey as everything else would defeat the point of printing it. */
.cc-disclosure {
  margin: 0 0 2rem;
  padding: .9rem 1.1rem;
  border-left: 3px solid var(--wp--preset--color--primary);
  background: var(--wp--preset--color--mono-4);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.55;
  color: var(--wp--preset--color--mono-2);
}

/* ---------------------------------------------------------------- recipe card */

.cc-recipe {
  margin: 2.5rem 0 0;
  padding: 1.75rem;
  background: #fff;
  border: 1px solid var(--wp--preset--color--mono-3);
  border-radius: 10px;
}

.cc-recipe-h {
  font-family: var(--wp--preset--font-family--fontsecondary);
  color: var(--wp--preset--color--mono-1);
  font-size: var(--wp--preset--font-size--large);
  margin: 1.75rem 0 .75rem;
}

.cc-recipe > .cc-recipe-h:first-of-type {
  margin-top: 0;
}

.cc-recipe-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  padding-bottom: 1.5rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--wp--preset--color--mono-3);
}

.cc-recipe-meta div {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.cc-recipe-meta span {
  font-size: var(--wp--preset--font-size--superbfont-tiny);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--featured);
}

.cc-recipe-meta strong {
  font-size: var(--wp--preset--font-size--superbfont-small);
  font-weight: 600;
  color: var(--wp--preset--color--mono-1);
}

.cc-ing-group {
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  margin: 1.25rem 0 .4rem;
  color: var(--wp--preset--color--mono-2);
}

.cc-ing-group:first-of-type {
  margin-top: .5rem;
}

.cc-ing-list {
  margin: 0 0 .5rem;
  padding-left: 1.15rem;
}

.cc-ing-list li {
  margin: .3rem 0;
  line-height: 1.5;
}

.cc-steps {
  margin: 0;
  padding-left: 1.3rem;
}

.cc-steps li {
  margin: 0 0 1rem;
  line-height: 1.6;
  padding-left: .2rem;
}

.cc-steps li::marker {
  color: var(--wp--preset--color--primary);
  font-weight: 700;
}

.cc-notes {
  margin: 0;
  padding-left: 1.15rem;
}

.cc-notes li {
  margin: .5rem 0;
  line-height: 1.55;
  color: var(--wp--preset--color--mono-2);
}

/* ---------------------------------------------------------------- sources */

.cc-sources {
  margin: 2.5rem 0 0;
  padding: 1.5rem 1.75rem;
  background: var(--wp--preset--color--mono-4);
  border-radius: 10px;
}

.cc-sources ul {
  margin: 0;
  padding-left: 1.15rem;
}

.cc-sources li {
  margin: .45rem 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.cc-sources a {
  font-size: var(--wp--preset--font-size--small);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------- related */

.cc-related {
  margin: 3rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--wp--preset--color--mono-3);
}

.cc-related ul {
  margin: 0;
  padding-left: 1.15rem;
}

.cc-related li {
  margin: .45rem 0;
}

.cc-related a {
  text-decoration: none;
}

.cc-related a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------- archive */

/* Kitchen Notes carry no photograph — the pipeline that writes them cannot take
   one. A tinted plate keeps the card grid on rhythm without faking an image. */
.cc-card-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  border-radius: 2px;
  background: var(--wp--preset--color--mono-4);
  border: 1px solid var(--wp--preset--color--mono-3);
  text-decoration: none;
}

.cc-card-plate span {
  font-family: var(--wp--preset--font-family--fontsecondary);
  font-size: var(--wp--preset--font-size--large);
  color: var(--wp--preset--color--primary);
}

/* ---------------------------------------------------------------- hub search */

.cc-search {
  margin: 1.5rem 0 2rem;
  max-width: 420px;
}

.cc-search input {
  width: 100%;
  padding: .65rem .85rem;
  font: inherit;
  font-size: var(--wp--preset--font-size--superbfont-small);
  color: var(--wp--preset--color--mono-1);
  background: #fff;
  border: 2px solid var(--wp--preset--color--mono-3);
  border-radius: 9px;
}

.cc-search input:focus {
  outline: none;
  border-color: var(--wp--preset--color--primary);
}

.cc-search-count {
  margin: .5rem 0 0;
  min-height: 1.2em;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--featured);
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 781px) {
  .cc-recipe {
    padding: 1.25rem;
  }

  .cc-recipe-meta {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem .75rem;
  }

  .cc-sources {
    padding: 1.25rem;
  }

  .cc-hero img {
    max-height: 300px;
  }
}