/*!
 * DatesOracle — /flavor-wheel/ hub and the "Explore the flavor wheels" callout
 * under /varieties/ (v1.9.49). Scoped to .do-fwh / .do-fwh-callout.
 */
.do-fwh { --h-green: #4f6b47; --h-ink: #2b2622; --h-muted: #6b5f52; --h-line: #e3d8c8; --h-brown: #3a2417; color: var(--h-ink); }
.do-fwh *, .do-fwh-callout * { box-sizing: border-box; }
.do-fwh h1 { margin: 4px 0 10px; color: var(--h-brown); font-size: clamp(30px, 4vw, 44px); line-height: 1.12; }
.do-fwh h2 { margin: 2.2rem 0 .8rem; color: var(--h-brown); font-size: clamp(22px, 2.6vw, 28px); }
.do-fwh p.do-fwh-lead { margin: 0 0 1.4rem; max-width: 70ch; font-size: 18px; line-height: 1.65; color: var(--h-muted); }
.do-fwh .do-fwh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.do-fwh .do-fwh-card {
  display: flex; flex-direction: column; gap: 10px; padding: 18px; background: #fffdf8; border: 1px solid var(--h-line);
  border-radius: 16px; box-shadow: 0 1px 2px rgba(43, 38, 34, .04);
}
.do-fwh .do-fwh-card-top { display: flex; align-items: center; gap: 14px; }
.do-fwh .do-fwh-card-top img, .do-fwh .do-fwh-ph {
  flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: radial-gradient(circle at 35% 30%, #6a4630, #2a1a10);
}
.do-fwh .do-fwh-card h3 { margin: 0; font-size: 21px; color: var(--h-brown); line-height: 1.2; }
.do-fwh .do-fwh-count { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 700; color: var(--h-green); }
.do-fwh p.do-fwh-summary { margin: 0; font-size: 15px; line-height: 1.6; color: var(--h-muted); max-width: none; }
.do-fwh ul.do-fwh-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.do-fwh .do-fwh-chips li { margin: 0; padding: 5px 11px; border-radius: 999px; background: #eef5ea; color: #2f4a2a; font-size: 13px; }
.do-fwh .do-fwh-chips strong { font-weight: 700; }
.do-fwh .do-fwh-note { display: inline-block; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: #fff3d9; color: #7a5410; font-size: 12px; line-height: 1.5; }
.do-fwh a.do-fwh-cta {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 999px;
  background: #1f5c46; color: #fff !important; font-size: 14px; font-weight: 700; text-decoration: none !important; transition: background .16s ease;
}
.do-fwh a.do-fwh-cta:hover { background: #164534; }
.do-fwh a.do-fwh-cta:focus-visible { outline: 3px solid #9fd0b8; outline-offset: 2px; }
.do-fwh ol.do-fwh-steps { margin: 0 0 1rem; padding-inline-start: 24px; max-width: 70ch; font-size: 16.5px; line-height: 1.7; }
.do-fwh p.do-fwh-links { margin: 1rem 0 0; font-size: 15.5px; max-width: none; }
.do-fwh .do-fwh-links a { color: #1f5c46; text-underline-offset: 2px; }

.do-fwh-callout {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: 2rem 0 1rem;
  padding: 18px 22px; background: linear-gradient(180deg, #fffdf8 0%, #fbf6ee 100%); border: 1px solid #e3d8c8; border-inline-start: 5px solid #4f6b47; border-radius: 14px;
}
.do-fwh-callout div { display: flex; flex-direction: column; gap: 3px; min-width: 220px; }
.do-fwh-callout strong { font-size: 18px; color: #3a2417; }
.do-fwh-callout span { font-size: 14.5px; color: #6b5f52; line-height: 1.5; }
.do-fwh-callout a {
  padding: 10px 20px; border-radius: 999px; background: #1f5c46; color: #fff !important; font-size: 14px; font-weight: 700; text-decoration: none !important;
}
.do-fwh-callout a:hover { background: #164534; }
@media (max-width: 560px) { .do-fwh-callout a { width: 100%; text-align: center; } }
@media print { .do-fwh-callout, .do-fwh a.do-fwh-cta { display: none; } }

/* v1.9.50: the hub fills the main column like /compare/ and /date-finder/ (datesoracle-pages.css caps .do14-detail at 760px) */
article.do14-detail.do-fwh-page { max-width: none !important; width: 100%; }
.do14-main-col:has(.do-fwh-page) { overflow: visible; }
.do-fwh .do-fwh-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.do-fwh p.do-fwh-lead, .do-fwh ol.do-fwh-steps { max-width: 78ch; }
/* the callout sits between two .do13-container sections on /varieties/: align it with their content */
.do13-archive ~ .do-fwh-callout { margin-inline: 22px; }