/* ==========================================================================
   OyPizza — site.css EXTENSIONS
   These are additive classes meant to be loaded AFTER /css/site.css.
   They resolve the v2 classes that were invented on /sweets-and-pastries/
   and /home pages and which currently have no CSS. Nothing here overrides
   an existing working class (.container, .section, .hero-split-*, .btn-primary).
   ========================================================================== */

/* Depends on colors_and_type.css being loaded first */

/* ── Section wrapper (v2 "page-section") ─────────────────────────────────
   Mirrors the padding rhythm of .section from site.css, but gives us hooks
   for cream / orange / tinted variants without touching .section.
*/
.page-section {
  padding: 64px 0;
  background: transparent;
}
.page-section-cream  { background: var(--op-cream); }
.page-section-tint   { background: var(--op-orange-tint); }
.page-section-orange { background: var(--op-orange); color: var(--op-white); }
.page-section-orange .section-title,
.page-section-orange .page-section-title { color: var(--op-white) !important; }
.page-section-orange em { color: var(--op-cream); }

@media (max-width: 768px) {
  .page-section { padding: 40px 0; }
}

/* ── Section inner (matches .container measure) ─────────────────────────── */
.section-inner {
  max-width: var(--op-container-word);
  margin: 0 auto;
  padding: 0 24px;
}
.section-inner-wide   { max-width: var(--op-container); }
.section-inner-narrow { max-width: var(--op-container-text); }
.section-inner-center { text-align: center; }

/* ── Body paragraphs used by new pages ─────────────────────────────────── */
.section-body {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--op-text);
  margin: 0 0 18px 0;
}
.section-body:last-child { margin-bottom: 0; }
.section-body strong { color: var(--op-ink); font-weight: 900; }
.section-body em     { color: var(--op-orange); font-style: italic; }

.section-body-white,
.section-title-white { color: var(--op-white) !important; }
.section-body-white  { opacity: 0.95; }

.section-small {
  font-size: 0.88rem;
  color: var(--op-gray);
  line-height: 1.6;
  margin-top: 18px;
}
.section-small-white { color: rgba(255,255,255,0.85); }

/* ── Hero-split extras (v2 inner + larger title variant) ─────────────────
   Works WITH existing .hero-split-section / .hero-split-left / .hero-split-right.
*/
.hero-split-inner {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-title-lg {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: 1px;
  /* !important needed — site.css has a late `h1,h2,h3 { color:#FF6600 !important }`
     that otherwise wins on orange hero backgrounds. */
  color: var(--op-white) !important;
  margin: 0 0 14px 0;
}
.hero-split-left .hero-title-lg,
.page-section-orange .section-title { color: var(--op-white) !important; }
.hero-eyebrow {   /* on cream-left, orange text; on orange-left, white */
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--op-white);
  opacity: 0.95;
  margin: 0 0 14px 0;
}
.hero-split-left[style*="#FF6B35"] .hero-eyebrow,
.hero-split-left[style*="#FF6600"] .hero-eyebrow { color: var(--op-white); }

.hero-sub {
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.95);
  margin: 0 0 14px 0;
  max-width: 400px;
}

/* ── Pill primary button (v2 "btn-primary-pill") ─────────────────────────
   Looks like .hero-split-cta but usable outside the hero.
*/
.btn-primary-pill {
  display: inline-block;
  background: var(--op-white);
  color: var(--op-orange);
  padding: 13px 28px;
  border-radius: var(--op-radius-pill);
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform var(--op-t-fast) var(--op-ease),
              background var(--op-t-fast) var(--op-ease),
              color var(--op-t-fast) var(--op-ease);
  align-self: flex-start;
}
.btn-primary-pill:hover  { transform: translateY(-1px); }
.btn-primary-pill:active { transform: translateY(1px); }

/* Default (non-hero) variant: orange fill, white text */
.page-section .btn-primary-pill,
.section .btn-primary-pill {
  background: var(--op-orange);
  color: var(--op-white);
}
.page-section .btn-primary-pill:hover { background: var(--op-orange-dark); }

/* Ghost-on-orange variant for orange section CTAs */
.btn-primary-pill.btn-white {
  background: var(--op-white) !important;
  color: var(--op-orange) !important;
}
.btn-primary-pill.btn-white:hover { background: var(--op-cream); }

/* ── Flavor cards (mazza-punk directions) ───────────────────────────────
   The inline-styled version works; this class form is cleaner for reuse.
*/
.flavor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.flavor-card {
  background: var(--op-cream);
  border-radius: var(--op-radius);
  padding: 24px;
  border-left: 4px solid var(--op-orange);
  transition: transform var(--op-t-base) var(--op-ease),
              box-shadow var(--op-t-base) var(--op-ease);
}
.flavor-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--op-shadow-hover);
}
.flavor-card--dark  { border-left-color: var(--op-flavor-dark); }
.flavor-card--milk  { border-left-color: var(--op-flavor-milk); }
.flavor-card--loud  { border-left-color: var(--op-flavor-loud); }
.flavor-card--weird { border-left-color: var(--op-flavor-weird); }

.flavor-card__tag {
  font-size: 0.7rem;
  font-weight: 900;
  color: var(--op-orange);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0 0 6px 0;
}
.flavor-card__title {
  font-size: 1.2rem;
  font-weight: 900;
  margin: 0 0 8px 0;
  color: var(--op-ink);
  font-family: 'Nunito', sans-serif;
}
.flavor-card--dark  .flavor-card__title { color: var(--op-flavor-dark); }
.flavor-card--milk  .flavor-card__title { color: var(--op-flavor-milk); }
.flavor-card--loud  .flavor-card__title { color: var(--op-flavor-loud); }
.flavor-card--weird .flavor-card__title { color: var(--op-flavor-weird); }

.flavor-card__body { margin: 0; color: var(--op-text); font-size: 0.95rem; line-height: 1.5; }

/* ── Community placeholder / callout card ───────────────────────────────
   Used on the mazza-punk home page for "Community feed opens soon".
*/
.community-placeholder-card {
  background: var(--op-white);
  border: 1.5px dashed var(--op-orange);
  border-radius: var(--op-radius);
  padding: 28px 32px;
  margin-top: 24px;
}
.placeholder-title {
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--op-orange);
  margin: 0 0 6px 0;
  letter-spacing: 0.5px;
}
.placeholder-body {
  font-size: 0.95rem;
  color: var(--op-text);
  line-height: 1.6;
  margin: 0;
}

/* ── Generic page-main so /main tags get consistent bg on v2 pages ─────── */
.page-main { background: var(--op-bg); }

/* ── Soft dividers ──────────────────────────────────────────────────────── */
.op-divider {
  width: 60px;
  height: 3px;
  background: var(--op-orange);
  border: 0;
  border-radius: 2px;
  opacity: 0.5;
  margin: 32px 0;
}

/* ── Orange tag / chip ──────────────────────────────────────────────────── */
.op-chip {
  display: inline-block;
  background: var(--op-orange);
  color: var(--op-white);
  font-weight: 900;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: var(--op-radius-pill);
}
.op-chip--tint { background: var(--op-orange-tint); color: var(--op-orange); }

/* ── Decorative "hutzpa stripe" — orange marquee accent ─────────────────
   Thin orange bar with white slashes, echoes the .philosophy-strip marquee.
*/
.op-hutzpa-stripe {
  height: 6px;
  background: repeating-linear-gradient(
    -45deg,
    var(--op-orange) 0 10px,
    var(--op-orange-dark) 10px 20px
  );
}

/* ── Community feed preview (dish /home pages) ──────────────────────────
   Used on the /home template to show what the community feed WILL look like
   post-launch, with a loud "Preview — not real testimonials" banner above.
*/
.feed-preview-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFF4CC;
  border: 1px solid #E8C547;
  color: #7A5A00;
  border-radius: var(--op-radius);
  padding: 10px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 20px;
}
.feed-preview-banner__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E8C547;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(232,197,71,0.25);
}

.feed-mock {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.feed-mock__item {
  display: flex;
  gap: 14px;
  background: var(--op-white);
  border: 1px solid var(--op-border);
  border-radius: var(--op-radius);
  padding: 16px 18px;
  transition: transform var(--op-t-fast) var(--op-ease),
              box-shadow var(--op-t-fast) var(--op-ease);
}
.feed-mock__item:hover {
  transform: translateY(-1px);
  box-shadow: var(--op-shadow);
}
.feed-mock__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--op-white);
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feed-mock__body { flex: 1; min-width: 0; }
.feed-mock__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.feed-mock__name {
  font-weight: 900;
  color: var(--op-ink);
  font-size: 0.95rem;
}
.feed-mock__badge {
  background: var(--op-orange);
  color: var(--op-white);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--op-radius-pill);
}
.feed-mock__time {
  color: var(--op-gray);
  font-size: 0.8rem;
}
.feed-mock__text {
  margin: 0 0 8px 0;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--op-text);
}
.feed-mock__reactions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.feed-mock__reaction {
  background: var(--op-cream);
  color: var(--op-text);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--op-radius-pill);
  border: 1px solid var(--op-border);
}

/* rev: v2.1 community-feed styles */


/* ============================================================
   Dual hero CTA wrapper (added 2005)
   Keeps primary + secondary side-by-side, wraps gracefully
   ============================================================ */
.hero-cta-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}

.hero-cta-group .btn-cta-secondary {
  background: #fff;
  color: #FF6B35;
  padding: 18px 36px;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.2s, box-shadow 0.2s;
}

.hero-cta-group .btn-cta-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}


/* ============================================================
   Home label for dish home pages (added 2007)
   Small, semi-opaque, cream color — visually differentiates
   h1 brand title on /home pages from /menu pages
   ============================================================ */
.hero-title-label-home,
.hero-title-lg .hero-title-label-home,
.hero-split-left .hero-title-lg .hero-title-label-home {
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  color: #FFE9AD !important;
  opacity: 0.65 !important;
  margin-left: 18px !important;
  letter-spacing: 0.08em !important;
  text-transform: lowercase !important;
  vertical-align: 0.4em !important;
  display: inline-block !important;
  line-height: 1 !important;
}