/* ============================================================
   WANDERING FORK — FOUNDATION CSS  (reconciled to brand package)
   Paste into Customize → Additional CSS in WordPress.

   Type:   Cinzel (display + labels, all caps) · Cormorant Garamond (body)
   Colour: Ink #111111 · Cream #F4EBD8 · Label parchment #F6F0E4 ·
           Deep olive #3F4A1F  (+ derived support tones, noted below)
   All wf- class names preserved. Legacy token names kept as aliases.
   ============================================================ */

/* Safety import — guarantees the editorial faces load inside Custom HTML
   blocks even independent of Kadence's global font loading. Harmless if
   Kadence already loads them (the browser de-dupes). */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

/* ---------- BRAND TOKENS ---------- */
:root {
  --wf-cream:    #F4EBD8;  /* page base (prescribed) */
  --wf-bone:     #EFE3C8;  /* deep cream — alternating section bg (derived) */
  --wf-ivory:    #F6F0E4;  /* Label parchment — cards / panels (prescribed) */
  --wf-ink:      #111111;  /* text (prescribed) */
  --wf-olive:    #3F4A1F;  /* Deep olive — primary accent (prescribed) */
  --wf-olive-dk: #2E3717;  /* hover / active (derived from accent) */
  --wf-gold:     #D4A017;  /* Cheesemonger gold — warm accent (package collection) */
  --wf-medium:   #5A5F47;  /* muted text — secondary copy (derived) */
  --wf-hair:     #C9C7B5;  /* hairlines / borders (derived) */

  /* legacy aliases — kept so existing markup keeps resolving */
  --wf-herb:   var(--wf-olive);
  --wf-border: var(--wf-hair);
  --wf-wheat:  var(--wf-gold);
}

/* ---------- BODY + BASE ---------- */
body {
  background-color: var(--wf-cream);
  color: var(--wf-ink);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ---------- TYPOGRAPHY HELPERS ---------- */
.wf-display {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.05;
  text-transform: uppercase;
}

.wf-heading {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wf-italic-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--wf-medium);
}

.wf-label {
  font-family: 'Cinzel', serif;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wf-olive);
}

/* ---------- SECTION LABEL (with horizontal rules) ---------- */
.wf-section-label {
  font-family: 'Cinzel', serif;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wf-olive);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.wf-section-label::before,
.wf-section-label::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--wf-hair);
  flex: 0 0 40px;
  opacity: 0.8;
}

/* ---------- BUTTONS ---------- */
.wf-btn {
  font-family: 'Cinzel', serif;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.9rem 2rem;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  border: 1px solid;
  transition: background 0.2s, color 0.2s;
}

.wf-btn-primary {
  background: var(--wf-olive);
  color: var(--wf-cream);
  border-color: var(--wf-olive);
}

.wf-btn-primary:hover {
  background: var(--wf-olive-dk);
  border-color: var(--wf-olive-dk);
  color: var(--wf-cream);
}

.wf-btn-secondary {
  background: transparent;
  color: var(--wf-olive);
  border-color: var(--wf-hair);
}

.wf-btn-secondary:hover {
  background: var(--wf-bone);
}

.wf-btn-cream {
  background: var(--wf-cream);
  color: var(--wf-olive);
  border-color: var(--wf-cream);
}

.wf-btn-cream:hover {
  background: var(--wf-bone);
}

/* ---------- SECTION SHELLS ---------- */
.wf-section {
  padding: 5rem;
}

.wf-section--bone {
  background: var(--wf-bone);
  border-top: 1px solid var(--wf-hair);
  border-bottom: 1px solid var(--wf-hair);
}

.wf-section--olive {
  background: var(--wf-olive);
  color: var(--wf-cream);
}

.wf-section-header {
  text-align: center;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.wf-section-header h2 {
  font-family: 'Cinzel', serif;
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wf-ink);
  margin: 0;
}

.wf-section-sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--wf-medium);
  text-align: center;
  margin: 0 auto 3rem;
  max-width: 38rem;
}

/* ---------- TABLE CARD (used in This Week's Tables) ---------- */
.wf-tables-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
}

.wf-table-card {
  background: var(--wf-ivory);
  border: 1px solid var(--wf-hair);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}

.wf-table-card:hover {
  box-shadow: 0 4px 20px rgba(63, 74, 31, 0.08);
  transform: translateY(-2px);
}

.wf-table-card-img {
  position: relative;
  height: 200px;
  background: var(--wf-bone);
  overflow: hidden;
}

.wf-table-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wf-badge {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  width: 28px;
  height: 28px;
  background: var(--wf-olive);
  color: var(--wf-cream);
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--wf-olive);
}

.wf-table-card-body {
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.wf-table-card-title {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wf-ink);
  line-height: 1.25;
  margin: 0;
}

.wf-table-card-desc {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--wf-medium);
  line-height: 1.4;
}

.wf-table-card-items {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  color: var(--wf-medium);
  line-height: 1.7;
  padding-top: 0.5rem;
  border-top: 1px solid var(--wf-hair);
  margin-top: 0.3rem;
}

.wf-table-card-save {
  padding-top: 0.8rem;
  margin-top: auto;
  border-top: 1px solid var(--wf-hair);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.wf-save-line {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--wf-olive);
}

.wf-save-line strong {
  font-weight: 600;
  color: var(--wf-gold);
  font-style: normal;
}

.wf-card-link {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wf-olive);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap 0.2s, color 0.2s;
  margin-top: 0.3rem;
}

.wf-card-link:hover {
  gap: 0.8rem;
  color: var(--wf-olive-dk);
}

.wf-card-link::after {
  content: '\2192';
  font-family: serif;
  font-weight: 400;
}

/* ---------- SEVEN TABLES OVERVIEW ---------- */
.wf-seven-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
  border: 1px solid var(--wf-hair);
  background: var(--wf-ivory);
}

.wf-seven-item {
  padding: 1.5rem 1rem;
  text-align: center;
  border-right: 1px solid var(--wf-hair);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
}

.wf-seven-item:last-child {
  border-right: none;
}

.wf-seven-item.active {
  background: var(--wf-cream);
}

.wf-seven-pip {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wf-olive);
}

.wf-seven-name {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wf-ink);
  line-height: 1.3;
}

.wf-seven-desc {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--wf-medium);
  line-height: 1.4;
  min-height: 2.5em;
}

.wf-seven-legend {
  margin-top: 1.5rem;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wf-olive);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.wf-seven-legend-pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wf-olive);
}

/* ---------- NOTES FROM THE MARKET ---------- */
.wf-notes-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto 3rem;
  gap: 2rem;
  flex-wrap: wrap;
}

.wf-notes-header-left {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.wf-notes-header-left h2 {
  font-family: 'Cinzel', serif;
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wf-ink);
  margin: 0;
}

.wf-notes-header-left p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-style: italic;
  color: var(--wf-medium);
  margin: 0;
}

.wf-notes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.wf-note {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wf-note-img {
  height: 220px;
  background: var(--wf-bone);
  overflow: hidden;
}

.wf-note-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wf-note-date {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wf-olive);
}

.wf-note-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--wf-ink);
  margin: 0;
}

.wf-note-excerpt {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.02rem;
  color: var(--wf-medium);
  line-height: 1.6;
  font-style: italic;
}

/* ---------- FORK LIST SIGNUP (dark olive block) ---------- */
.wf-forklist-inner {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.wf-forklist h2 {
  font-family: 'Cinzel', serif;
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wf-cream);
  margin: 0;
}

.wf-forklist p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-style: italic;
  color: rgba(244,235,216,0.78);
  line-height: 1.7;
  margin: 0;
}

.wf-forklist-section-label {
  font-family: 'Cinzel', serif;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244,235,216,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.wf-forklist-section-label::before,
.wf-forklist-section-label::after {
  content: '';
  display: block;
  height: 1px;
  background: rgba(244,235,216,0.25);
  flex: 0 0 40px;
}

.wf-forklist-form {
  display: flex;
  gap: 0;
  width: 100%;
  max-width: 480px;
  margin-top: 0.5rem;
}

.wf-forklist-form input {
  flex: 1;
  padding: 0.85rem 1.2rem;
  background: rgba(244,235,216,0.12);
  border: 1px solid rgba(244,235,216,0.35);
  border-right: none;
  color: var(--wf-cream);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  outline: none;
}

.wf-forklist-form input::placeholder {
  color: rgba(244,235,216,0.5);
  font-style: italic;
}

.wf-forklist-form input:focus {
  border-color: rgba(244,235,216,0.6);
}

/* ---------- FOOTER STRIP ---------- */
.wf-footer-strip {
  background: var(--wf-cream);
  border-top: 1px solid var(--wf-hair);
  padding: 1.8rem 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}

.wf-footer-strip-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.wf-footer-strip-item svg {
  width: 22px;
  height: 22px;
  stroke: var(--wf-olive);
  fill: none;
  stroke-width: 1.2;
  flex-shrink: 0;
}

.wf-footer-strip-item span {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wf-ink);
}

.wf-footer-strip-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--wf-hair);
}

/* ---------- RESPONSIVE BREAKPOINTS ---------- */
@media (max-width: 1200px) {
  .wf-tables-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .wf-seven-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .wf-seven-item:nth-child(4) {
    border-right: none;
  }

  .wf-seven-item:nth-child(1),
  .wf-seven-item:nth-child(2),
  .wf-seven-item:nth-child(3),
  .wf-seven-item:nth-child(4) {
    border-bottom: 1px solid var(--wf-hair);
  }
}

@media (max-width: 900px) {
  .wf-section,
  .wf-footer-strip {
    padding: 3rem 1.5rem;
  }

  .wf-tables-grid,
  .wf-seven-grid,
  .wf-notes-grid {
    grid-template-columns: 1fr;
  }

  .wf-seven-item {
    border-right: none;
    border-bottom: 1px solid var(--wf-hair);
  }

  .wf-seven-item:last-child {
    border-bottom: none;
  }

  .wf-forklist-form {
    flex-direction: column;
  }

  .wf-forklist-form input {
    border-right: 1px solid rgba(244,235,216,0.35);
    border-bottom: none;
  }

  .wf-footer-strip {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }

  .wf-footer-strip-sep {
    display: none;
  }
}.wf-section-label,
.wf-forklist-section-label {
  white-space: nowrap;
}